can't click on links inside a div opened with jquery, using preventDefault
Question
Bit stumped by this one, I open a dropdown menu with jquery and I don't seem to be able to click on any links inside the boxes.
I think the preventDefault is affecting everything within it, but I only want it to affect the top level. I'm not great with jquery, so I can't figure out how to make it only select the first a that's inside it to prevent the default action.
I only want the prevent default on the .toggle-nav itself.
JS:
// navbar toggle menu
$(".toggle-nav").on("click", function(event){
event.preventDefault();
if ($(this).children('.toggle-content').is(":visible"))
{
$(this).children('.toggle-content').hide();
}
else
{
$(".toggle-content").hide(); // hide any already open
$(this).children('.toggle-content').show();
}
});
Example of the menu:
<div class="toggle-nav user-box hide-small">
<a href="#"><img src="{:avatar}" alt="" width="49" height="49"> <span class="login-caret"><span class="caret-down"></span></span></a>
<div class="toggle-content">
<ul>
<li><a href="test">Logout</a></li>
</ul>
</div>
</div>
Example CSS:
/* toggle menus */
.toggle-content {
display: none;
white-space: nowrap;
position: absolute;
right: 0;
top: 49px;
background: #222;
box-shadow: 1px 1px 1px black;
padding: 5px;
word-wrap: normal;
z-index: 999999;
}
.toggle-content ul {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
color: #999;
}
.toggle-content li {
margin: 0;
padding: 0;
}
UPDATE
Thanks to the help, this is what works to toggle them and to close another when you open a new one:
// navbar toggle menu
$(".toggle-nav > a").on('click', function(event){
event.preventDefault();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
With this added to this CSS:
.toggle-active {
display: block;
}
3 answers
solution1
1 ACCPTED 2016-12-05 01:59:20
Try with this answer, hope this will help you
// navbar toggle menu $(".toggle-nav > a").on('click', function(event){ event.preventDefault(); var $toggle = $(this).closest('.toggle-nav').children('.toggle-content'); if ($toggle.hasClass('active')){ $($toggle).removeClass('active'); } else { $($toggle).addClass('active'); } });
/* toggle menus */ .toggle-content { display: none; white-space: nowrap; position: absolute; right: 0; top: 49px; background: #222; box-shadow: 1px 1px 1px black; padding: 5px; word-wrap: normal; z-index: 999999; } .toggle-content ul { list-style: none; list-style-type: none; margin: 0; padding: 0; color: #999; } .toggle-content li { margin: 0; padding: 0; } .active { display: block; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="toggle-nav user-box hide-small"> <a href="#"><img src="{:avatar}" alt="" width="49" height="49">Click me <span class="login-caret"><span class="caret-down"></span></span></a> <div class="toggle-content"> <ul> <li><a href="test">Logout</a></li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </body> </html>
solution2
0 2016-12-05 01:19:56
I see you wanted to work your preventDefault() only in your first link to do that remove your
event.preventDefault();
add a new event for your first link. in that event just put the preventDefault()
So your code would be like this
// navbar toggle menu
$(".toggle-nav").on("click", function(event){
if ($(this).children('.toggle-content').is(":visible"))
{
$(this).children('.toggle-content').hide();
}
else
{
$(".toggle-content").hide(); // hide any already open
$(this).children('.toggle-content').show();
}
});
// apply this events only to your first link
$(".toggle-nav:eq(0)", function(event) {
event.preventDefault();
});
solution3
-1 2016-12-05 00:42:13
Looks like it could be the "blocked div" problem. Is sometimes solved by adding position: relative to the element or container, which in this case would likely be .toggle-content or possibly more targeted ( .toggle-content ul li a etc.). Others advise setting a high z-index as well, though I haven't found that to be necessary where the problem has surfaced for me.
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.