I have a link and div within each of my list items. If the link HAS an href then I want to make sure the div is hidden within its list item and the link appear just normal.
However if the link DOES NOT have a href (e.g. href=""), then I want to add the class .show to the div so I can show it. I also want to hide the link at the same time.
Or is there a better way to do this? Thanks
<style>
.nolinkdiv { display:none; }
.show { display:block!important; }
</style>
<ul>
<li>
Register
<div class="nolinkdiv">Register Coming Soon</div>
</li>
<li>
Register
<div class="nolinkdiv">Register Coming Soon</div>
</li>
</ul>
You don't need JavaScript for this:
.nolinkdiv { display:none; }
ul li a[href=""] {
display: none;
}
ul li a[href=""] + div {
display: block;
}
This is actually the proper way of doing it to hide via CSS only:
ul li a {
display: none;
}
ul li a[href^="https:"],
ul li a[href^="http:"] {
display: block; //This can be anything else rather than block, such as grid etc.
}
$( document ).ready(function() {
$('ul li').each(function(idx, li) {
var LI = $(this);
var hrefValue = LI.find("a").attr('href');
if(hrefValue) {
LI.find("div").hide()
} else {
LI.find("a").hide()
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Register
<div class="">Register Coming Soon</div>
</li>
<li>
Register
<div class="">Register Coming Soon</div>
</li>
</ul>
Related
I have a menu where there are the heading and the submenus. Whenever the user hovers over the heading, submenus show up.
And whenever any of the items in submenus is clicked, the submenu is set to hidden using Javascript. Now, when the user hovers over the menu, the submenus don't show up! Please help me to fix this.
function closesSan() {
document.getElementsByClassName('submenu')[0].style.setProperty('display', 'none', 'important');
}
#main:hover .submenu {
display: block!important;
}
<ul>
<li id="main">
List
<ul class="submenu" style="display: none;">
<li onclick="closesSan()">Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>
I had to write some additional code to get the desired result. Actually, the base problem in your code was important and property {both works same} in sense both get prioritized by code.
So to get rid of I have added an additional class on click and removing that class on every new hover. Hope it will satisfy the needs.
var main = document.getElementById("main");
main.onmouseover = function() {
document.querySelector('.submenu').classList.remove("displayNoneImp");
}
function closesSan() {
document.querySelector('.submenu').classList.add("displayNoneImp");
}
.submenu {
display: none;
}
#main:hover .submenu {
display: block;
}
.displayNoneImp {
display: none !important;
}
<ul>
<li id="main">
List
<ul class="submenu">
<li onclick="closesSan()">Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>
Since you don't use a pure CSS implementation, use event listeners and avoid using !important whenever possible:
var main = document.querySelector('#main');
var submenu = document.querySelector('.submenu');
var items = document.querySelectorAll('#main li');
main.addEventListener('mouseover', function () {
submenu.style.display = 'block';
});
main.addEventListener('mouseout', function () {
submenu.style.display = 'none';
});
items.forEach(function(item) {
item.addEventListener('click', function () {
console.log('clicked on:', item)
submenu.style.display = 'none';
});
});
.submenu {
display: none;
}
<ul>
<li id="main">
List
<ul class="submenu">
<li>Bacon</li>
<li>Tuna</li>
<li>Chicken</li>
</ul>
</li>
</ul>
When Using !important is The Right Choice
You can try something simple like this:
function closesSan() {
document.getElementsByClassName('submenu')[0].classList.add("hide");
setTimeout(function() {
document.getElementsByClassName('submenu')[0].classList.remove("hide");
},100)
}
#main .submenu {
display: none;
}
#main:hover .submenu {
display: block;
}
#main .submenu.hide {
display: none;
}
<ul>
<li id="main">
List
<ul class="submenu" >
<li onclick="closesSan()" >Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>
use visibility instead of display
visibility: hidden;
save those kittens
I am trying to resize a div when a user decides to hide (or show) particular content. For example, I have a contents page (https://jsfiddle.net/4b1g5jp9/1/), when a user clicks hide, I want the div to resize accordingly, hiding all contents except the actual Contents title.
Also, the 'Show' link should only show if the content is actually hidden and vice versa.
I have tried to adapt some JS based on a similar issue I found online and tried the following approach:
<script language="javascript">
function toggle() {
var ele = document.getElementById("contents-list");
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
But the above achieves nothing. Any advice/solution would be appreciated.
By using the event's target we can determine what to show/hide.
If we do it that way, we can use this multiple times on a single page without it messing with each other.
Also, I've used toggle() which basically does the if() you had in your code statement for you.
https://jsfiddle.net/jkrielaars/qhb8ccob/1/
$(document).ready(function() {
$('.toggle').click( function(event) {
$(event.target).parents('.contents-list').find('ul').toggle();
var newText = $(event.target).text() === '[Hide]' ? '[Show]' : '[Hide]';
$(event.target).text(newText);
});
});
.contents-list{
width: 300px;
background-color: #f4f6f9;
padding: 15px;
border: 1px solid #b3b4b5;
}
.contents-list ul{
list-style-type: none;
margin: 0;
padding: 0;
font-size: 14px;
}
#contents-list ul li{
text-decoration: none;
}
.contents-list ul li a{
padding-bottom: 2px;
text-decoration: none;
}
.contents-list a:visited {
text-decoration: none; color:blue;
}
.contents-list ul li a:hover{
text-decoration: underline;
}
.centerContents{
text-align: center;
}
.toggle{
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents-list">
<div class="centerContents"><b> Contents </b>
<a class="toggle" href="#hideContents">[Hide]</a>
</div>
<br/>
<ul>
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
<div class="contents-list">
<div class="centerContents"><b> Contents </b>
<a class="toggle" href="#hideContents">[Hide]</a>
</div>
<br/>
<ul>
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
Use that structure as your HTML:
<div id="contents-list">
<ul>
<li id="centerContents"><b> Contents </b>
<a class="hideLinks" href="#">[Hide]</a>
<a class="showLinks" href="#">[Show]</a>
</li>
</ul>
<ul class="submenu">
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
Using jQuery:
<script type="text/javascript">
$("#contents-list ul li a.hideLinks").click(function(){
$("ul.submenu").css("display", "none");
});
$("#contents-list ul li a.showLinks").click(function(){
$("ul.submenu").css("display", "block");
});
</script>
Your jQuery script should be right after the HTML, or near the </body> tag. And make sure to call jQuery cdn inside head tag: <script src="jquery-3.0.0.min.js" type="text/javascript"></script>.
NOTE: You can use Show() and Hide() functions instead of css display properties. You can read more about those functions Here.
I'm working on http://www.variied.com/market/men/. I'm trying to create a toggle dropdown menu on the sidebar that is triggered when someone hits the "Tops" link on the sidebar, which will then toggle the content in the sub-menu to be displayed. Here's my current code
<style>
ul.category ul.sub-menu ul.sub-menu li a{
display:none
}
</style>
<script>
jQuery(document).ready(function() {
jQuery("#menu-item-746").click(function() {
jQuery(this).next("ul.category ul.sub-menu ul.sub-menu li a").toggle();
return false;
});
});
</script>
There are a few issues in this fiddle:
You have a class called #submenu it should just be submenu
You're passing the event so you can use e.preventDefault() (unless you prefer return false)
I would suggest setting the subnav ul to display: none and just toggling that and I would use slideToggle for a nicer effect.
JS
$("#menu-item-746").click(function(e) {
e.preventDefault();
$(this).next("ul").slideToggle();
});
HTML
<ul class="submenu">
<li id="menu-item-746">Test Item</li>
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
</ul>
CSS
.submenu ul{
display: none;
}
FIDDLE
UPDATE
I looked at your HTML on your site and it appears that your ul subnav is a child of your li not a sibling (it was a sibling in your fiddle). Try this:
$(this).find("ul").slideToggle();
Also from the code you have provided you are targeting an id which means this would only work for that 1 element. It appears the ones with a subnav have a class called .menu-item-has-children so I would target that, like so:
$(".sub-menu .menu-item-has-children").click(function(e) {
e.preventDefault();
$(this).find("ul.sub-menu").slideToggle();
});
NEW UPDATE
Target the a instead then:
$(".sub-menu .menu-item-has-children").on("click", " a:first", function(e) {
e.preventDefault();
$(this).siblings("ul.sub-menu").slideToggle();
});
I need to add a second level of submenus here.
Is there a dynamic solution, so only one submenu is opened, when clicking on the link?
And when clicking a link to a submenu (in the first submenu), then open this one?
And so on…
I already changed the jsfiddle a little, to have one level of sublevels more: http://jsfiddle.net/cRsZE/363/
Working example with one level of submenus: JSFiddle Demo
HTML:
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
CSS:
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
jQuery:
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
Source: Creating Drop Down Menu on click CSS
Try,
CSS:
.hidden {
display: none;
}
JS:
$('ul ul').addClass('hidden');
$(document).ready(function () {
$('.parent').click(function (e) {
e.stopPropagation();
$(this).find('ul').first().toggleClass('hidden');
});
});
DEMO
I have a html code like this:
<ul>
<li class="curent">Home</li>
<li>
Products
<ul class="sub">
<li>Samsung</li>
<li>Lenovo</li>
</ul>
</li>
<li>News</li>
</ul>
http://img38.imageshack.us/img38/5795/70a.png
I want to click any a tag and li tag parent is hightlighted. I try this code but it doesn't work with a tag in ul has sub class:
var this_url = window.location.href;
$('#block_nav_primary ul li').each(function() {
if ($(this).children().attr('href') == this_url) {
$('#block_nav_primary ul').find('li[class="curent"]').removeClass('curent');
$(this).addClass('curent');
}
});
Can anyone point me in the right direction here?
Thanks for your help!
P/S: it looks like this thread Highlight Parent Link in Navigation Menu With Jquery
I'm not sure I quite understand your wording, but you want to apply the same effect to all LI tags, including those in a sublist?
Replace this:
$('#block_nav_primary ul li').each(function() {
With this:
$('#block_nav_primary ul').find('li').each(function() {
Try
val items = $('#block_nav_primary ul li').click(function(){
items.filter('.current').removeClass('current');
$(this).addClass('current')
})
Why don't you try styling it such that the A tag takes the width of the entire LI tag and so when you click A tag, it would highlight the entire thing. The CSS code for it would be something like:
li a {display: block; width: 100%; padding: 10px 0; background-color: pink;}
li a:hover {background-color: orange;}
Try this:
$("ul a").click(function () {
$(this).parent().parent().addClass("blue");
});
or
$("ul a").click(function () {
$(this).closest("ul").addClass("blue");
});
CSS in both cases:
.blue > a {
color: blue;
}
JSFiddle to a quite similar scenario.