I have a problem with span class with jQuery.
What I need:
It works well, if I close menu by clicking the same button. But if when you open the menu, click on the second button, rectangle span working bad. Since that time are both rectangles completely wrong.
I have a bug in the code with jQuery
<div class="all">
<a href="#" class="menu">
Menu 1
<span class="rectangle"></span>
</a>
<a href="#" class="menu2">
Menu 2
<span class="rectangle2"></span>
</a>
<div class="sliding">
<table id="tables">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="sliding2">
<table id="tables2">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
jQuery(document).ready(function () {
jQuery(".sliding, .sliding2").hide();
jQuery(".menu, .menu2").show();
jQuery(".all a .rectangle2, .all a .rectangle").show();
jQuery(".menu").click(function () {
jQuery(".sliding, .all a .rectangle2").toggle();
jQuery(".sliding2").hide();
});
jQuery(".menu2").click(function () {
jQuery(".sliding2, .all a .rectangle").toggle();
jQuery(".sliding").hide();
});
});
.sliding {
background-color: blue;
display: none;
padding: 20px
}
.menu {
padding: 0 20px;
color: blue;
width: 200px
}
.menu2 {
color: red;
}
.sliding2 {
background-color: red;
display: none;
padding: 20px
}
.all a .rectangle {
border-style: solid solid none;
border-width: 10px;
margin: 0 10px
}
.all a .rectangle2 {
border-style: solid solid none;
border-width: 10px;
margin: 0 10px
}
Please help me. Have a nice day.
Please try this:
jQuery(".menu").click(function () {
jQuery(".sliding, .all a .rectangle2").toggle();
if(jQuery('.sliding').is(':visible')) {
jQuery(".rectangle2").hide();
jQuery(".rectangle").show();
}
jQuery(".sliding2").hide();
});
jQuery(".menu2").click(function () {
jQuery(".sliding2, .all a .rectangle").toggle();
if(jQuery('.sliding2').is(':visible')) {
jQuery(".rectangle").hide();
jQuery(".rectangle2").show();
}
jQuery(".sliding").hide();
});
I have changed your script, try this: jQuery(document).ready(function () { jQuery(".sliding, .sliding2").hide(); jQuery(".menu, .menu2").show(); jQuery(".all a .rectangle2, .all a .rectangle").show();
jQuery(".menu").click(function () {
jQuery(".sliding, .all a .rectangle2").toggle();
jQuery(".sliding2").hide();
jQuery(".rectangle").show();
jQuery(".rectangle2").hide();
});
jQuery(".menu2").click(function () {
jQuery(".sliding2, .all a .rectangle").toggle();
jQuery(".sliding").hide();
jQuery(".rectangle").hide();
jQuery(".rectangle2").show();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.