I'm trying to use jQuery to hide and show a div when the link in inside the a li tag is clicked, however I can't get the DOM element.
Ousite the ul >li the script it working fine
<a class="showSingle " >All Test </a> //Work Fine
$(function() {
// $('.showSingle ul.list-inline li a').click(function () {
$('.showSingle ').click(function() {
$(this).siblings('.targetDiv ').slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a><i class="fas fa-arrow-circle-down"></i>
</li>
i have add jsfiddler to explain the hole issue https://jsfiddle.net/mpef13qu/4/
I don't think there is anything wrong, you were just missing the target :/
UPDATE: I've changed the code snippet
$(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$(this).parents("ul")
.siblings('.targetDiv')
.slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
here is the link
If the target is outside the ul it's not a sibling it's more like an uncle or something ;) so $(this).siblings wont work
Try this:
$('.showSingle').click(function(e){
e.preventDefault();
$('.targetDiv').slideToggle('fast')
})
Updated answer based on your markup
Since you have multiple toggle triggers and you only want to toggle the target directly after a certain trigger you can make use of $(this)
But you need to chain a few other jQuery functions to get up to the level where you can target the next target.
$('this').parent().parent().next('.targetDiv')
.next() is better than .siblings() in this situation since it returns the next sibling matching the .targetDiv selector
Here's the complete code:
$(document).ready(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$('this').parent().parent().next('.targetDiv').slideToggle('fast');
});
});
Updated fiddle https://jsfiddle.net/ywsmgd5c/
For not reloading page <a href="#"> must be written.
I've made demo for you, see it, #Ploni Almoni
Related
I use a bootstrap dropdown as a shoppingcart. In the shopping cart is a 'remove product' button (a link). If I click it, my shoppingcart script removes the product, but the menu fades away. Is there anyway way to prevent this? I tried e.startPropagation, but that didn't seem to work:
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li>
<span class="quantity">1x</span>
<span class="product-name">Test Product </span>
<span class="product-remove"><a class="removefromcart" packageid="4" href="#">x</a>
</span></li>
<li>Total: € 43,00</li>
<li>Checkout</li>
</ul>
</li>
</ul>
As you can see tha element with class="dropwdown-toggle" made it a dropdown. Another idea was that I just reopen it on clicking programmatically. So if someone can explain me how to programmatically open a Bootstrap dropdown, it would help well!
Try removing the propagation on the button itself like so:
$('.dropdown-menu a.removefromcart').click(function(e) {
e.stopPropagation();
});
Edit
Here is a demo from the comments with the solution above:
http://jsfiddle.net/andresilich/E9mpu/
Relevant code:
JS
$(".removefromcart").on("click", function(e){
var fadeDelete = $(this).parents('.product');
$(fadeDelete).fadeOut(function() {
$(this).remove();
});
e.stopPropagation();
});
HTML
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">1</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">10</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">8</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">3</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">4</span></span>
</li>
<li class="divider"></li>
<li>Total: € 43,00</li>
<li>Checkout</li>
</ul>
</li>
</ul>
This answer is just a sidenote to the accepted answer. Thanks to both the OP and Andres for this Q & A, it solved my problem. Later, however, I needed something that worked with dynamically added items in my dropdown. Anyone coming across this one might also be interested in a variation Andres' solution that works both with the initial elements as well as elements added to the dropdown after the page has loaded:
$(function() {
$("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) {
e.stopPropagation();
});
});
Or, for dynamically created dropdown menus:
$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) {
e.stopPropagation();
});
Then just put the data-keepOpenOnClick attribute anywhere in any of the <li> tags or its child elements, depending on your situation. E.G.:
<ul class="dropdown-menu">
<li>
<-- EG 1: Do not close when clicking on the link -->
<a href="#" data-keepOpenOnClick>
...
</a>
</li>
<li>
<-- EG 2: Do not close when clicking the checkbox -->
<input type="checkbox" data-keepOpenOnClick> Pizza
</li>
<-- EG 3: Do not close when clicking the entire LI -->
<li data-keepOpenOnClick>
...
</li>
</ul>
On bootstrap 4, when you put a form inside the dropdown menu, it won't collapse when clicking inside of it.
So this worked best for me:
<div class="dropdown">
<!-- toggle button/link -->
<div class="dropdown-menu">
<form>
<!-- content -->
</form>
</div>
</div>
In short, You can try this. It is working for me.
<span class="product-remove">
<a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a>
</span>
The menu opens when you give show class to the menu, so you can implement the function yourself without using data-toggle="dropdown".
<div class="dropdown">
<button class="btn btn-secondary" type="button">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div id="overlay"></div>
#overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
display: none;
}
#overlay.show{
display: block;
}
.dropdown-menu{
z-index: 1001;
}
$('button, #overlay').on('click', function(){
$('.dropdown-menu, #overlay').toggleClass('show')
})
Try this in codepen.
I was having the same problem with an accordion/toggle sub-menu that was nested within a dropdown-menu in Bootstrap 3. Borrowed this syntax from the source code to stop all collapse toggles from closing the dropdown:
$(document).on(
'click.bs.dropdown.data-api',
'[data-toggle="collapse"]',
function (e) { e.stopPropagation() }
);
You can replace [data-toggle="collapse"] with whatever you want to stop closing the form, similar to how #DonamiteIsTnt added a property to do so.
I wrote some lines of code that make it works as perfect as we need with more of control on it:
$(".dropdown_select").on('hidden.bs.dropdown', function () {
if($(this).attr("keep-open") == "true") {
$(this).addClass("open");
$(this).removeAttr("keep-open");
}
});
$(".dropdown_select ul li").bind("click", function (e) {
// DO WHATEVER YOU WANT
$(".dropdown_select").attr("keep-open", true);
});
New appended content do not get the same design as the existing ones.
Here my full code:
HTML
<!-- Top Bar -->
<nav class="navbar">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Notifications -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
<i class="material-icons">notifications</i>
<span class="label-count">7</span>
</a>
<ul class="dropdown-menu">
<li class="header">NOTIFICATIONS</li>
<li class="body">
<ul class="menu" id="append">
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-light-green">
<i class="material-icons">person_add</i>
</div>
<div class="menu-info">
<h4>12 new members joined</h4>
<p>
<i class="material-icons">access_time</i> 14 mins ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-cyan">
<i class="material-icons">add_shopping_cart</i>
</div>
<div class="menu-info">
<h4>4 sales made</h4>
<p>
<i class="material-icons">access_time</i> 22 mins ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-red">
<i class="material-icons">delete_forever</i>
</div>
<div class="menu-info">
<h4><b>Nancy Doe</b> deleted account</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-orange">
<i class="material-icons">mode_edit</i>
</div>
<div class="menu-info">
<h4><b>Nancy</b> changed name</h4>
<p>
<i class="material-icons">access_time</i> 2 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-blue-grey">
<i class="material-icons">comment</i>
</div>
<div class="menu-info">
<h4><b>John</b> commented your post</h4>
<p>
<i class="material-icons">access_time</i> 4 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-light-green">
<i class="material-icons">cached</i>
</div>
<div class="menu-info">
<h4><b>John</b> updated status</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-purple">
<i class="material-icons">settings</i>
</div>
<div class="menu-info">
<h4>Settings updated</h4>
<p>
<i class="material-icons">access_time</i> Yesterday
</p>
</div>
</a>
</li>
</ul>
</li>
<li class="footer">
View All Notifications
</li>
</ul>
</li>
<!-- #END# Notifications -->
</ul>
</div>
</div>
</nav>
<br/><br/> <br/><br/> <br/><br/>
Append it
JAVASCRIPT
$( document.body ).on( 'click', '.append', function( event ) {
$("#append").append(
"<li>"+
"<a href=\"javascript:void(0);\">"+
"<div class=\"icon-circle bg-purple\">"+
"<i class=\"material-icons\">settings</i>"+
"</div>"+
"<div class=\"menu-info\">"+
"<h4>Just make a small Test to see the problem</h4>"+
"<p>"+
"<i class=\"material-icons\">access_time</i> Yesterday"+
"</p>"+
"</div>"+
"</a>"+
"</li>"
);
return false;
});
A real example to test it and see my problem:
https://jsfiddle.net/Lr7gn020/1/
To reproduce my problem:
Click on Append it link
Then click on Notification dropdown menu and scroll down into the last <li> row, and you will see that the design of appended rows is not like the others.
Please help to figure it out.
You're missing a couple of classes when you append the new items. The a tag in the original items has the waves-effect and waves-block classes applied, but you're not giving it those in the newly added elements.
Try changing "<a href=\"javascript:void(0);\">" to "<a href=\"javascript:void(0);\" class=\" waves-effect waves-block\">"
Updated JSFiddle: https://jsfiddle.net/Lr7gn020/3/
I have forked your fiddle with a minor adjustment. The only thing that is preventing the styling from being the same as the others is the amount of content that is in the h4 under the menu-info div. When I deleted some of the text, leaving only "Just make a small Test" it appears like all the other list items. The text was making it so the width of the div was larger than the area given to the right of the icon which is why it was dropping down.
Your anchor tag is also missing the two classes waves-effect waves-block. If you are adding these 2 classes with JS you will need to reinitialize the function that does this after the item is appended.
UPDATE
If you need to have that much content then just simply add a max-width: 200px to your .menu-info class. Updated Fiddle
<li class="nav-parent">
<a><i class="fa fa-list-alt" aria-hidden="true</i><span>Forms</span>
</a>
<ul class="nav nav-children" id="dd">
<li>
<a href="{:url('edit/Form/getone')}"><span class="text"> Editors</span>
</a>
</li>
<li>
<a href="{:url('edit/Form/getone')}"><span class="text"> Editors</span>
</a>
</li>
</ul>
</li>
Hi, as you can see i have a nav bar section, i am using click function, but when i click, it alerts twice. does anyone know why? thanks li
$('li.nav-parent ul li a').click(function(){
alert(1);
});
I Guess there is a issue in your HTML Construct near
<li class="nav-parent">
<a><i class="fa fa-list-alt" aria-hidden="true</i><span>Forms</span>
</a>
In above code
<i class="fa fa-list-alt" aria-hidden="true</i> is not properly closed.
Try Below one
$(function(){
$('li.nav-parent ul li a').click(function(e) {
e.preventDefault();
alert(1);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-parent">
<a>
<i class="fa fa-list-alt" aria-hidden="true"></i>
<span>Forms</span>
</a>
<ul class="nav nav-children" id="dd">
<li>
<a href="{:url('edit/Form/getone')}">
<span class="text"> Editors</span>
</a>
</li>
<li>
<a href="{:url('edit/Form/getone')}">
<span class="text"> Editors</span>
</a>
</li>
</ul>
</li>
error in your code:<a><i class="fa fa-list-alt" aria-hidden="true</i><span>Forms</span> missing " before </i>
after fix, alerts only once.
https://jsfiddle.net/u4s7wmhg/1/
thank you guys. but it is not because of that. :( the reason i just found out is because I loaded this click function twice somehow in somewhere. But thank your effort.
as pointed out by other user you have misplaced > in your code.
Also
what you are trying to select in your jquery which has two matches (event propagation due to unclosed braces ) ie $('li.nav-parent ul li a') has matches for each li and that's causing the event to fire twice for each li > a element click.
I have menus in 'ul, li' how can I disable the parent menu using JavaScript? I want to stop redirect for parent menu and only child menu will get redirected
I cannot add class or id in the html to disable the parent menu. is there any way that will help to stop redirect using JavaScript?
Following is my HTML code:
<ul class="firstLevel" style="">
<li class="sel">
<div class="item">
<a title="Home" href="#/"><span>Home</span></a>
</div>
</li>
<li class="dir">
<div class="item">
<a title="About Us" href="#/page-18080"><span>About Us</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="Vision" href="#/page-18126"><span>Vision</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
</div>
</li>
</ul>
</div>
</li>
<li class="dir">
<div class="item">
<a title="Events" href="#/events"><span>Events</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="About the event" href="#/page-18147"><span>About the event</span></a>
</div>
</li>
</ul>
</div>
</li>
</ul>
https://api.jquery.com/event.stoppropagation/
$(child).on("click", function(event) {
// TODO
event.stopPropagation();
});
Based on what I understood, you want to disable all firstLevel links except links also under secondLevel. As requested I have not touched the HTML and the javascript will do all the work by itself.
SEE COMMENTS FOR STEP-BY-STEP EXPLANATION:
$(function() {
$(".firstLevel").find('a').each(function() {
// this is all link elements under element with class firstlevel
if ($(this).parents('.secondLevel').length) {
// this is all link elements which also is under element with class secondLevel
$(this).click(function() {
//don't disturb the event here. feel free to remove the below alert as well.
alert("this link will work");
});
} else {
// this is all link elements under a firstLevel element but not a secondLevel element
$(this).click(function() {
// we shud block this click. we will return false so that jQuery will internally call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
alert("this link will not work");
return false;
});
}
});
});
WORKING SNIPPET EXAMPLE: (note that the HTML is same as you posted. no changes were made there, only the above javscript was added!)
$(function() {
$(".firstLevel").find('a').each(function() {
if ($(this).parents('.secondLevel').length) {
$(this).click(function() {
alert("this link will work");
});
} else {
$(this).click(function() {
alert("this link will not work");
return false; //this will call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="firstLevel" style="">
<li class="sel">
<div class="item">
<a title="Home" href="#/"><span>Home</span></a>
</div>
</li>
<li class="dir">
<div class="item">
<a title="About Us" href="#/page-18080"><span>About Us</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="Vision" href="#/page-18126"><span>Vision</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
</div>
</li>
</ul>
</div>
</li>
<li class="dir">
<div class="item">
<a title="Events" href="#/events"><span>Events</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="About the event" href="#/page-18147"><span>About the event</span></a>
</div>
</li>
</ul>
</div>
</li>
</ul>
How do l toggle the id="tree" when any of the class="folder" is clicked? My implementation is not working. It keeps toggling only the first item no matter which class="folder" I click. Thanks for your help
<div class="main">
<ul class="collections>
<li class="listitem1">
<span class="folder"> folder </span>
<div id="tree">
//...THIS IS WHERE THE CONTENT IS
</div>
</li>
<li class"listitem2">
<span class="folder"> folder </span>
<div id="tree">
//...THIS IS WHERE THE CONTENT IS
</div>
</li>
</ul>
</div>
JS
$(document).ready(function() {
$('#tree').slideToggle("fast");
$('.folder').click(function() {
$('#tree').slideToggle("fast");
});
});
There are id should be unique.
And there are some typo in your html code also. Like = sign is not there after class. And you forget to close the quote.
Use following JQuery.
$(this).siblings("div").slideToggle("fast");
Working Fiddle
$('.tree').slideToggle("fast");
$('.folder').click(function() {
$(this).parent().find('.tree').slideToggle("fast");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<ul class="collections">
<li class="listitem1">
<span class="folder"> folder </span>
<div class="tree">
THIS
</div>
</li>
<li class="listitem2">
<span class="folder"> folder </span>
<div class="tree">
THIS IS WHERE THE CONTENT IS
</div>
</li>
</ul>
</div>
Try using .parent() and then .find() to get the class tree
Please change the ID in to a class, because ID is unique. Its not allowed same multiple ID name in a document.
$(document).ready(function() {
$('.tree').hide();
$('.folder').click(function() {
$(this).parent().find('.tree').slideToggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<ul class="collections">
<li class="listitem1">
<span class="folder"> folder </span>
<div class="tree">
//...THIS IS WHERE THE CONTENT IS
</div>
</li>
<li class="listitem2">
<span class="folder"> folder </span>
<div class="tree">
//...THIS IS WHERE THE CONTENT IS
</div>
</li>
</ul></div>