meryem mereyemm
Reputation: 1
hide item when show another
How can i close an item(.sub-menu) when another is open please ?
This is my code
$('.menu-item-has-children > a').attr('aria-expanded', false);
var click_item = function () {
$('.menu-item-has-children > a').on('click', function(){
var EltToToggle = $(this).next('.sub-menu');
if ($(this).attr('href') === "#") {
event.preventDefault();
}
if ($(this).attr('aria-expanded') === "true") {
$(this).attr('aria-expanded', false);
$(this).removeClass('is-opened');
EltToToggle.removeClass('show');
} else {
$(this).attr('aria-expanded', true);
$(this).addClass('is-opened');
EltToToggle.addClass('show');
}
});
}
click_item();
$(document).mouseup(function(e) {
var sub_menu = $(".sub-menu");
var except_body = $(".menu");
// If the target of the click isn't the sub_menu
if (!except_body.is(e.target) && except_body.has(e.target).length === 0) {
sub_menu.removeClass('show');
$(".menu-item-has-children > a").attr('aria-expanded', false);
$(".menu-item-has-children > a").removeClass('is-opened');
// click_item();
console.log("ok")
}
});.menu {
display: flex;
}
li {
margin: 10px;
}
.menu-item-has-children {
position: relative;
}
.sub-menu {
display: none;
position: absolute;
top: auto;
left: 100%;
-webkit-transform: translate(-50%, 2rem);
transform: translate(-50%, 2rem);
padding: 1rem 0;
background-color: #fff;
border-radius: .6rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}
.show {
display: block!important;
}
.menu-item-has-children>a {
position: relative
}
.menu-item-has-children>a:after {
top: 2rem;
right: 1.5rem;
}
.menu-item-has-children>a:after {
content: "\f077";
font-family: FontAwesome!important;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: inherit;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-alt: "";
speak: none;
right: 1.6rem;
top: 2.3rem;
font-size: 1rem;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease,-webkit-transform .25s ease;
}
.menu-item-has-children>a:after {
top: 2rem;
right: 1.5rem;
}
.menu-item-has-children>a[aria-expanded=true]:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.sub-menu a {
color: white;
}
.sub-menu.one {
background: teal;
width: 300px;
}
.sub-menu.two {
background: purple;
width: 300px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Item 1
</a>
<ul class="sub-menu one">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Link 2
</a>
<ul class="sub-menu two">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Lvl2. Children 3 with children
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
</ul>when i click on the link ('.menu-item-has-children > a') i want to show the concerning item (.sub-menu) and when i click on another(.sub-menu) i want to show it and hide the other one (WITHOUT CHANGING HTML CODE, JUST JS)
Upvotes: 0
Views: 53
Answers (3)
Toxnyc
Reputation: 1350
You can reset the whole thing inside your else block.
$('.menu-item-has-children > a').attr('aria-expanded', false);
var click_item = function () {
$('.menu-item-has-children > a').on('click', function(){
var EltToToggle = $(this).next('.sub-menu');
if ($(this).attr('href') === "#") {
event.preventDefault();
}
if ($(this).attr('aria-expanded') === "true") {
$(this).attr('aria-expanded', false);
$(this).removeClass('is-opened');
EltToToggle.removeClass('show');
} else {
//Reset all
$('.menu-item-has-children > a').attr('aria-expanded', false)
$('.menu-item-has-children > a').removeClass('is-opened')
$('.menu-item-has-children > a').next('.sub-menu').removeClass('show');
$(this).attr('aria-expanded', true);
$(this).addClass('is-opened');
EltToToggle.addClass('show');
}
});
}
click_item();
$(document).mouseup(function(e) {
var sub_menu = $(".sub-menu");
var except_body = $(".menu");
// If the target of the click isn't the sub_menu
if (!except_body.is(e.target) && except_body.has(e.target).length === 0) {
sub_menu.removeClass('show');
$(".menu-item-has-children > a").attr('aria-expanded', false);
$(".menu-item-has-children > a").removeClass('is-opened');
// click_item();
console.log("ok")
}
});.menu {
display: flex;
}
li {
margin: 10px;
}
.menu-item-has-children {
position: relative;
}
.sub-menu {
display: none;
position: absolute;
top: auto;
left: 100%;
-webkit-transform: translate(-50%, 2rem);
transform: translate(-50%, 2rem);
padding: 1rem 0;
background-color: #fff;
border-radius: .6rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}
.show {
display: block!important;
}
.menu-item-has-children>a {
position: relative
}
.menu-item-has-children>a:after {
top: 2rem;
right: 1.5rem;
}
.menu-item-has-children>a:after {
content: "\f077";
font-family: FontAwesome!important;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: inherit;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-alt: "";
speak: none;
right: 1.6rem;
top: 2.3rem;
font-size: 1rem;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease,-webkit-transform .25s ease;
}
.menu-item-has-children>a:after {
top: 2rem;
right: 1.5rem;
}
.menu-item-has-children>a[aria-expanded=true]:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.sub-menu a {
color: white;
}
.sub-menu.one {
background: teal;
width: 300px;
}
.sub-menu.two {
background: purple;
width: 300px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Item 1
</a>
<ul class="sub-menu one">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Link 2
</a>
<ul class="sub-menu two">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Lvl2. Children 3 with children
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
</ul>Upvotes: 1
asfandyar24
Reputation: 84
$('.menu-item-has-children > a').attr('aria-expanded', false);
call this and also i see you are using this class is-opened so whenever the click item on list is called call the above function and remove the class from the DOM so that other list's opened are closed and then calle this on the current one so that it's opened.
or using jquery you can call change the style property to display none.
Upvotes: 0
uamanager
Reputation: 1258
Best approach is to hide all items and then show only tree branch that you need.
To show branch just go through all items from clicked one to root one.
Upvotes: 0
Related Questions
- show/hide item using javascript
- Showing and hiding List items
- Show/Hide javascript only one item
- Hide / Show multiple items with Jquery
- javascript hide two element and show only one
- How to hide div when list items are displayed
- Hide/Show elements with jQuery
- jquery hide/show
- Can independently show/hide. How do I hide on show?
- Jquery hide and show