How not to add a class to a block that does not have a class of foot-items? When I click on "Link", still the foot-active class is added and removed, even though this foot-menu does not have a class of foot-items, like the b condition was written.
$(document).on('click', '.foot-title', function(e){
if ($('.foot-menu').hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
}
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
I also tried through .each(), but it did not work out.
$('.foot-title').each(function() {
$(this).click(function() {
$('.foot-menu').each(function(i) {
if ($(this).hasClass('foot-items')) {
$(this).toggleClass('foot-active');
}
});
});
});
$(document).on('click', '.foot-items.foot-menu', function(e){
$(this).toggleClass('foot-active');
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
If your aim is to add click event only with class foot-items and foot-menu, You can change your click event on .foot-items.foot-menu. No need to trigger it each time.
When checking for the class foot-items you need to do it based on the clicked element so you need to do:
$(this).parent()
Hope this helps :)
$(document).on('click', '.foot-title', function(e){
if ($(this).parent().hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
console.log(".foot-active added or removed");
}
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
Related
The idea is that the user can either download the file by clicking download or view it as a png in browser by clicking open/show/whatever.
I used a solution found on here to achieve a show/hide toggle div function. It worked perfectly for one list item, but I'm trying to find a way to use this with a list of about 30 entries. I know I could just copy and paste the code and make new classes for the divs and anchors but surely there's a better way. I'm new to web development so I apologise if the solution is an obvious one.
Here is an example. I want each entry to control it's own div toggle (click on open).
$('.list-link').click(function() {
$('.test-div').show(500);
$('.list-link').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('.test-div').hide(500);
$('.list-link').show(0);
$('.Hide').hide(0);
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
</ul>
https://codepen.io/pen/RwgaxRQ
Thanks in advance.
To do what you require you can use jQuery's DOM traversal methods, such as closest() and find(), to relate the element that raised the click event to those around it which you want to affect.
Also note that your HTML is invalid. ul can only contain li elements, not div, so you need to change the structure slightly.
With that said, try this:
$('.list-link').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').show(500);
$li.find('.list-link').hide();
$li.find('.Hide').show();
});
$('.Hide').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').hide(500);
$li.find('.list-link').show();
$li.find('.Hide').hide();
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
</ul>
Also note that I updated the demo to use jQuery v3.6.0, as 2.1.4 is very outdated.
I am trying to create a toggle list using html and jquery means on clicking button i want a drop-down list
my html code snippet is
<div class="container">
<div class="card text-center" style="width: 14 rem;">
<div class="card-body">
<button class="btn btn-danger btn-sm">
hello
</button>
<div class="show">
<ul class="list">
<li class="e">Home</li>
<li class="e">About</li>
<li class="e">Contact Us</li>
<li class="e">Log Out</li>
</ul>
</div>
</div>
</div>
</div>
and my css styling for the same is
.list{
display: none;
}
.e{
list-style: none;
}
.info{
display: block;
}
i am having little confusion in the jquery part which looks like this
$(document).ready(function(){
$('.card-body').on('click','button',function(){
$('.list li').toggleClass('list');
});
});
any help would be appreciated.
If you want to toogle your .list you can do it like this:
$(document).ready(function() {
$('.card-body').on('click', 'button', function() {
$('.list').toggleClass('info');
});
});
Note you can also do it like $('.list').toggle()
$(document).ready(function() {
$('.card-body').on('click', 'button', function() {
$('.list').toggleClass('info');
});
});
.list {
display: none;
}
.e {
list-style: none;
}
.info {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card text-center" style="width: 14 rem;">
<div class="card-body">
<button class="btn btn-danger btn-sm">
hello
</button>
<div class="show">
<ul class="list">
<li class="e">Home</li>
<li class="e">About</li>
<li class="e">Contact Us</li>
<li class="e">Log Out</li>
</ul>
</div>
</div>
</div>
I have some items products in a grid.
I want that when i click on each icon from item, it will toggle a class '.active' and also remove class if others from others items are visible.
This is my script so far, can add the class remove from others items but when i click on the same icon it doesn't toggle it (remove the class).
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$('.items').find('.actions').not($this).removeClass('active');
$that.find('.actions').toggleClass('active');
});
<ul class="products-grid row">
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
You need to remove this row:
$('.items').find('.actions').not($this).removeClass('active');
Because in your function you first remove the class, and then toggle it. In this case, if the element already has active class, it will be removed first, and then toggle will add it again (it looks like the element still has an active class, because operations are very fast). I have removed the row as described above and added some styles to see the difference, so here is the working snippet (click on "Show Actions" to see the difference):
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$that.find('.actions').toggleClass('active');
});
.items #show-actions {
width: 100vw;
background-color: royalblue;
color: white;
}
.active {
background-color: red;
}
img {
width: 50px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
First, you can't have duplicate ID's on any HTML page. I suggest you change #show-actions to a class for the rather than an ID.
Second, you also have some extra quote marks in your img element.
Once you do that it's pretty simple.
$('.show-actions').on('click', function() {
var items = $('.items');
items.removeClass('active');
$(this).parent().parent('.items').addClass('active');
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>
.wm_clearfix3{
overflow: auto;
height: 1%;
}
I added a clearfix css class in my label,and it was working well when I had not add angular codes into my HTML.But when I added angular into HTML,the clearfix class became don't work.The cut picture like this:
Maybe because of 'ng-repeat'?Can somebody help me?
You don't need to add ng-class unless you are adding a class with logic. So just add class is enough
Why use 'ng-class' if you have not an angular expression ?
try with:
ng-class="{wm_clearfix3}"
or:
.wm_clearfix3{
overflow: auto;
height: 1%;
clear: both;
}
Does the solution at the below JSFiddle link help you out at all?
https://jsfiddle.net/6vm4csjb/
ul {
list-style: none;
}
[class*="wm_clearfix"] {
display: inline-block;
width: 100%;
}
[class*="wm_clearfix"]:before, [class*="wm_clearfix"]:after {
display: table;
content: " ";
}
img {
display: inline-block;
width: 20px;
height: 20px;
}
.pull-left {
float: left;
}
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>
I have a problem with my jQuery code. I would like to click on one of the previewed text that belongs to that button and the other was eventually closed.
The text should go down using slideDown() and disappear using slideUp(). How it could adjust to it did not make a mess?
HTML:
<div class="ata-pdf-wrapper ata-btn-video">
<a title="Videos">
<span>Videos</span>
<span> </span>
</a>
</div>
<div class="ata-pdf-wrapper ata-btn-pdf">
<a title="Download PDF">
<span>Download</span>
<span> </span>
</a>
</div>
<br/>
<br/>
<div class="ata-media-wrapper">
<div class="ata-downloads">
<ul>
<li>
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
</li>
<li>
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
</li>
<li>
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
</li>
<li>
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
</li>
</ul>
</div>
<div class="ata-videos">
<ul>
<li>
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
</li>
<li>
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
</li>
<li>
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
</li>
<li>
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
</li>
</ul>
</div>
</div>
jQuery:
$(document).ready(function() {
$(".ata-pdf-wrapper.ata-btn-video").click(function(){
if ($(".ata-pdf-wrapper.ata-btn-video").hasClass("active")) {
$(".ata-media-wrapper").hide();
$(".ata-videos").fadeIn(500);
$(".entry-content").removeClass("shadow");
$(".ata-pdf-wrapper.ata-btn-video").removeClass("active");
} else{
$(".ata-pdf-wrapper.ata-btn-video").addClass("active");
$(".ata-media-wrapper").show();
$(".ata-videos").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
$(".ata-pdf-wrapper.ata-btn-pdf").click(function(){
if ($(".ata-pdf-wrapper.ata-btn-pdf").hasClass("active")) {
$(".ata-media-wrapper").hide();
$(".ata-downloads").fadeIn(500);
$(".entry-content").removeClass("shadow");
$(".ata-pdf-wrapper.ata-btn-pdf").removeClass("active");
} else{
$(".ata-pdf-wrapper.ata-btn-pdf").addClass("active");
$(".ata-media-wrapper").show();
$(".ata-downloads").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
});
The code is on jsFiddle.
If y understand what you want to do with those lists, something not messy is the following example.
$(document).ready(function() {
$(".ata-pdf-wrapper.ata-btn-video").click(function(ev){
var $currentTarget = $(ev.currentTarget);
if ($currentTarget.hasClass("active")) {
$(".ata-videos").slideUp(500);
$(".entry-content").removeClass("shadow");
$currentTarget.removeClass("active");
} else{
$currentTarget.addClass("active");
$(".ata-videos").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
$(".ata-pdf-wrapper.ata-btn-pdf").click(function(ev){
var $currentTarget = $(ev.currentTarget);
if ($currentTarget.hasClass("active")) {
$(".ata-downloads").slideUp(500);
$(".entry-content").removeClass("shadow");
$currentTarget.removeClass("active");
} else{
$currentTarget.addClass("active");
$(".ata-downloads").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
});
.ata-pdf-wrapper a {
display: inline-block;
background: #55d239;
border-radius: 20px;
text-align: center;
border: 2px solid #fff;
cursor: pointer;
}
.ata-pdf-wrapper a > span {
float: left;
padding: 6px 20px 5px 25px;
color: #fff;
}
.ata-pdf-wrapper.ata-btn-video a > span + span,
.ata-pdf-wrapper.ata-btn-pdf a > span + span,
.ata-pdf-wrapper a > span + span {
float: right;
width: 11px;
height: 18px;
padding: 10px 10px 10px 18px;
border-left: 1px solid #45bd2a;
}
.ata-pdf-wrapper a:hover,
.ata-pdf-wrapper.active a {
border: 2px solid #309319;
}
.ata-pdf-wrapper.ata-btn-video {
right: 200px;
}
.ata-downloads,
.ata-videos {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="ata-pdf-wrapper ata-btn-video">
<a title="Videos">
<span>Videos</span>
<span> </span>
</a>
</div>
<div class="ata-videos">
<ul>
<li>
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
</li>
<li>
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
</li>
<li>
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
</li>
<li>
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
</li>
</ul>
</div>
<div class="ata-pdf-wrapper ata-btn-pdf">
<a title="Download PDF">
<span>Download</span>
<span> </span>
</a>
</div>
<div class="ata-downloads">
<ul>
<li>
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
</li>
<li>
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
</li>
<li>
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
</li>
<li>
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
</li>
</ul>
</div>
<br/> <br/>