I need a Javascript IF statement that detects if:
$('.ms-quickLaunch .menu ul.static li a .menu-item-text') == "Manage"
And if it does equal "Manage" then set the list to .show().
<ul class="root static">
<li class="static linksBelow">
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage</span>
</span>
</a>
<ul class="static" style="display: none;">
<li>
<a href="javascript:open();" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage List</span>
</span>
</a>
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage Documents</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
*
if ($('.ms-quickLaunch .menu ul.static .menu-item-text').html() == "Manage") {
$('.ms-quickLaunch .menu ul.static').show();
}
(I have removed a couple of unnecessary elements from your selector to make it more efficient)
ok maybe you can try this.
but if it's possible, it's better to add id to all those lines to avoid possible clash.
<ul class="root static">
<li class="static linksBelow">
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage</span>
</span>
</a>
<ul class="static" style="display: none;">
<li>
<a href="javascript:open();" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage List</span>
</span>
</a>
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage Documents</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
if($("li.linksBelow span.menu-item-text").html().toLowerCase()=="manage"){
$("ul.static ul.static").show();
}
var anchor = $('.ms-quickLaunch .menu ul.static li a');
if ($('.menu-item-text', anchor).html() === "Manage")
{
anchor.next("ul").show();
}
jsFiddle Demo
Related
I have li list items. When I click on any one li item it should get appended or displayed to one div tag and the remaining list items at the sam time should get appended in other div tag using jQuery.
$(document).on('click', '.main-menu li', function() {
$('.sidenav').append($('.topnav')[0].innerHTML);
$('.topnav').empty();
$(this).remove()
});
<div class="topnav"></div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Hope I understood correctly what you expected. As mentionned before, if you want to append li to your div, you need a parent ul on top.
As suggested, here is a snippet :
$('.main-menu li').on('click', function(_click) {
var $selectedLi = $(_click.currentTarget);
$('.topnav ul').append($selectedLi.clone());
$selectedLi.remove();
$('.sidenav ul').append($('.main-menu ul').clone());
$('.main-menu ul').remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
<ul></ul>
</div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav">
<ul></ul>
</div>
Actually you can't append li elements to div, they can just be appended to a list element.
What you need to do is to get the text of the li elements and append it to the divs, and use $('.main-menu li').not($(this)) to get other li elements, where $(this) is the clicked li element.
This is how should be your code:
$(document).on('click', '.main-menu li', function() {
$('.sidenav').text($(this).text());
$('.topnav').empty();
$('.main-menu li').not($(this)).each(function(i) {
$('.topnav').append($('.main-menu li').not($(this))[i].textContent);
});
});
Demo:
$(document).on('click', '.main-menu li', function() {
$('.sidenav').text($(this).text());
$('.topnav').empty();
$('.main-menu li').not($(this)).each(function(i) {
$('.topnav').append($('.main-menu li').not($(this))[i].textContent);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav"></div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
I have the following HTML item (menubox):
<div class="uiContextualLayerPositioner uiLayer" data-testid="undefined" data-ownerid="u_0_10" style="width: 473px; left: 288px; top: 290px;">
<div class="uiContextualLayer _5v-0 _53il uiContextualLayerBelowLeft">
<div class="_54nq _57di _558b _2n_z" id="u_0_y">
<div class="_54ng">
<ul class="_54nf" role="menu">
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8"></i>
<span class="_54nh">Item1</span>
</span>
</a>
</li>
<li class="_54ni _5ipo _54nd __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" data-testid="notif_setting_higlights" role="menuitemcheckbox" aria-checked="true">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8">
</i>
<span class="_54nh">Item2</span>
</span>
</a>
</li>
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8"></i>
<span class="_54nh">Item3</span>
</span>
</a>
</li>
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_ey5BbZl6hUH sx_780712">
</i>
<span class="_54nh">Item4</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
and i can see that Item1 is deselected, and Item2 is selected with:
aria-checked="true"
and i want to deselect Item2 and select Item1. For this purpose take objectID from Item1 that says it's selected
_54nc _54nu
and call
document.getElementById("_54nc _54nu").setAttribute("aria-checked", true)', 'about: blank', 0)
but nothin happens. What did i missed?
P.S. I see that all object-ID's of class are same, but i also tried other id's. Maybe I misunderstood the issue of id for the class, and maybe the way it is different. Please give me directions. :)
document.getElementById() is incorrect since none of your element has any id.
You want to use document.getElementsByClassName()
Menu - Snippet
<ul class="Menu Open">
<li>
<a href="javascript:;" data-title="Account">
<span class="Title">Account</span>
</a>
<ul class="sub-menu First TeStInG">
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<span class="Title">Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages">
<span class="Title">Messages</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<span class="Title">Compose</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" data-title="Account/Profile">
<span class="Title">Profile</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Profile/View">
<span class="Title">View</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JQuery - Snippet
$(document).ready(function() {
"use strict";
$(document).on('click', function(e) {
if ($(e.target).closest($('.Menu')).length) {
if ($(e.target).closest("a").siblings("ul").length === 0) {
console.log('Doesn\'t have Children');
} else {
$(e.target).closest("a").siblings("ul").show();
}
}
});
});
What I'm Trying To Achieve
Without using jQuery UI, I would like to make it so that only one menu item is visible at a time on each level.
If the user has expanded a level multiple times then clicks on a different higher level, all within should be hidden.
If the user clicks on a same level item which expands, all other same level should be hidden.
I've tried several ways to do this, however I keep getting tied up whereas I either make things hide which shouldn't or make it so that I cannot expand anything. I've done this previously and cannot understand why I cannot do this now.
You can use find() but when you click on parent you will have to check if it is parent, so when you want to open you just want to open direct children but when you want to close you want to close all chidren.
$("ul li ul").hide()
$('li').click(function(e) {
e.stopPropagation()
var parent = $(this)
$(this).find('ul').each(function() {
if ($(this).is(':visible')) {
$(this).hide()
} else {
if ($(this).parent().is(parent)) {
$(this).show()
}
}
})
$(this).siblings().children('ul').hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Menu Open">
<li>
<a href="javascript:;" data-title="Account">
<span class="Title">Account</span>
</a>
<ul class="sub-menu First TeStInG">
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<span class="Title">Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages">
<span class="Title">Messages</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<span class="Title">Compose</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" data-title="Account/Profile">
<span class="Title">Profile</span>
</a>
<ul>
<li>
<a href="javascript:;" data-title="Account/Profile/View">
<span class="Title">View</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<li>
<a href="#">
<i class="entypo-tools"></i>
<span class="title">PHP-SDK</span>
<span class="badge badge-secondary">3</span>
</a>
<ul>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/installation">
<i class="entypo-inbox"></i>
<span class="title">Installation</span>
</a>
</li>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/getStarted">
<i class="entypo-docs"></i>
<span class="title">Getting Started</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flash"></i>
<span class="title">API-Endpoints</span>
<span class="badge badge-info">3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
<span class="badge badge-success">4</span>
</a>
<ul>
<li>
<a href="/mypage_v2/sdk/newsletter">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletterEmail">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletteranalytics">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/sample2">
<i class="entypo-newspaper"></i>
<span class="title">NewslettersProcess</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
If you use php rendering and on menu item click page refreshes, you can add class for example "active" to parent li(s), and in styles add li.active {display:block} or something like that style to show hidden elements
Finally i am ok with the condition of laravel routes
<li #if(Request::path() == "mypage_v2/applications/lists" || Request::path() == "mypage_v2/applications/register") class="active opened")#endif>
I have a dropdown menu where i hide certain elements depending on what ad group they are in.
My code hides the element if its on the bottom in the menu, not if the element is in the top of menu, then it hides every elements.
-- Site1 --
-- Site2 --
-- Site3 --
-- Site4 --
Heres my code:
This will hide every element:
$('span:contains("Site1")').show();
$('span:contains("Site2")').hide();
$('span:contains("Site3")').hide();
$('span:contains("Site4")').hide();
And if its "Site4" in the bottom of the menu, the code works.. (Only site4 will be visible)
$('span:contains("Site1")').hide();
$('span:contains("Site2")').hide();
$('span:contains("Site3")').hide();
$('span:contains("Site4")').show();
The html meny:
<ul class="dynamic" style="">
<li class="dynamic">
<a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/test/site1">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Site1</span>
</span>
</a>
</li>
<li class="dynamic">
<a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/test/Site2">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Site2</span>
</span>
</a>
</li>
<li class="dynamic">
<a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/test/Site3">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Site3</span>
</span>
</a>
</li>
<li class="dynamic">
<a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/test/Site4">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Site4</span>
</span>
</a>
</li>
</ul>
Try with this, I have try to do the same stuff for you. Demo
Html
<div id="1">
<span class="name">
<div class="quote">Mark</div>
</span>
</div>
<div id="2">
<span class="name1">
<div class="quote1">Run</div>
</span>
</div>
Javascript
$('.name .quote').hide();
$('.name1 .quote1').show();