So I would like to build a unsorted list and and another unsorted list within it so there is a basic menu functionality.
I basically need to know how to have Jquery access the elements so when a main level item is clicked, its children show.
So for example:
<ul class="category-links">
<li>
<span>Category 1</span>
<ul class="sub-category-links">
<li>Sub-category 1</li>
<li>Sub-category 2</li>
<li>Sub-category 3</li>
</ul>
</li>
</ul>
I might have several of these. Essentially I set the subcategories to display:none and I want Jquery to allow for when I click on the "category-links", only its children are displayed.
Thanks!
You can do something like this:
$('.category-links li').click(function(){
$(this).find('.sub-category-links').show();
});
Related
I have a menu of a list of article names list-A, and a corresponding list of articles content, list-B. Each list A and list B item pair share an identical value in their class eg. class="orderCntrl-6062347".
I want to be able to select an item from list A to bring the corresponding article from list B to the top of list B.
I know how to re-order the lists by using the following to bring a selected item to the top of a list:
$("li.orderIt").click(function() {
$(this).parent().prepend($(this));
});
This is what my code currently looks like:
<!-- List A selecting an item here should bring selected item and paired item in list B to the top of each of their lists -->
<ul class="list-A">
<li class="orderIt orderCntrl-6062347"><a>Item 1</a></li>
<li class="orderIt orderCntrl-6062348"><a>Item 2</a></li>
<li class="orderIt orderCntrl-6062349"><a>Item 3<a></li>
</ul>
<ul class="list-B">
<li class="orderCntrl-6062347"><h2 class="newsTitle">Item One</h2></li>
<li class="orderCntrl-6062348"><h2 class="newsTitle">Item Two</h2></li>
<li class="orderCntrl-6062349"><h2 class="newsTitle">Item Three</h2></li>
</ul>
<!-- Script to bring accompanying article to top of list on selecting side menu - currently only bring elements in List A to the top of their lists -->
<script>
$("li.orderIt").click(function() {
$(this).parent().prepend($(this));
});
</script>
Here's a link to how things will look, the green side menu is list-A (it may be above the page title on screens under 1300px).
How do I adjust the script to bring the corresponding list B item to the top as well?
Is this kind of what you are looking for?
https://jsfiddle.net/stevenkaspar/61oL0Lfm/
<ul class="list-A">
<li class="orderCntrl-6062347" data-news-target='#news1'><h2 class="newsTitle">Item One</h2></li>
...
<!-- List B -->
<ul class="list-B">
<li id='news1'>NEWS One</li>
<script>
$("[data-news-target]").click(function() {
$(this).parent().prepend($(this));
var target_element = $( $(this).data('newsTarget') );
target_element.parent().prepend( target_element );
});
</script>
You can use data-news-target to say what element it will move
Working JSFiddle Example
What you need to do is:
Get the unique name you want to use to match with the article element.
Use it to find the article element you want to move to the top.
Move the article element to the top.
Recommendations:
Set the unique name as an ID on the menu item. It'll be easier to get and cleaner (id's are supposed to be unique anyway).
Use .on("click", function() { ... }) rather than .click(function() { ... }) for the many reasons mentioned here.
Now, on click you need to find the id of this using this.id. Then you need to add a . to it and grab the element as an object using the symbols $(). Then prepend it in exactly the way you did before.
Example HTML:
<ul class="List-A">
<li class="orderIt" id="unique-name-1">Item 1</li>
<li class="orderIt" id="unique-name-2">Item 2</li>
<li class="orderIt" id="unique-name-3">Item 3</li>
</ul>
<ul class="List-B">
<li class="unique-name-1">Article 1</li>
<li class="unique-name-2">Article 2</li>
<li class="unique-name-3">Article 3</li>
</ul>
Example jQuery
$(".List-A").on("click", ".orderIt", function() {
$(this).parent().prepend($(this));
target_article = $('.' + this.id)
target_article.parent().prepend(target_article)
});
It could be simplified to:
$(".List-A").on("click", ".orderIt", function() {
$(this).parent().prepend($(this));
$('.' + this.id).parent().prepend($('.' + this.id));
});
but that's much less readable, which will make it more time-consuming to figure out what's going on 6 months later when you've forgotten what you did.
I have the following menu:
<li style="display:none" class=".logged_in">Menu 1</li>
<li style="display:none" class=".logged_in">Menu 2</li>
<li style="display:show" class=".logged_out">Menu 3</li>
I use Ajax to call an endpoint to test whether a user is logged in or not. If logged in, I want to hide menu 1 and 2, and show menu 3, if not, then the opposite is true.
I have been trying to hide and show the items like such:
$.find('.logged_out').css("display", "show");
$.find('.logged_in').css("display", "none");
But this doesn't seem to work.
I also tried a number of variations such as:
$(".logged_out").show();
$(".logged_in").show();
Any idea of the correct way to do this?
Either of those will hide your element (except you should use a valid value for the display property because show isn't one).
Your problem is that you have dots in the class names themselves. Consequently, your jquery selector is looking for elements with classes logged_in and logged_out and can't find them because your classes are called .logged_in and .logged_out.
Change:
<li style="display:none" class=".logged_in">Menu 1</li>
<li style="display:none" class=".logged_in">Menu 2</li>
<li style="display:show" class=".logged_out">Menu 3</li>
To (remove dots in the class names):
<li style="display:none" class="logged_in">Menu 1</li>
<li style="display:none" class="logged_in">Menu 2</li>
<li style="display:show" class="logged_out">Menu 3</li>
If you want to use the dot, then check out #BG101's answer
#nem's answer is correct. but if you HAVE to have a dot in the class name, you can escape the dot like so:-
$('.\\.logged_in').show()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=".logged_in" style="display:none">Hello</div>
Even if the element has class=".logged_in", you can still target the element to show/hide using the following With selector expression :
$('[class=".logged_in"]').hide();
$('[class=".logged_out"]').show();
Sorry for the vague title, but I couldn't find an appropriate title, explaining the problem well.
The problem: I wrote a code that toggles lists. It works the way I want it. When I click on the the 'headcategory' it opens the subcategories, etc. The problem occurs when I click on the headcategory for the first time, it opens every list, which is not what I want. When I close and open it again, it works the way it should be. I'm trying to figure out why it does that, but I've no clue. So if someone could help me, he/she would be greatly appreciated.
JQuery code.
$(document).ready(function()
{
$('ul.subcat').hide();
$('li').click(function(event)
{
event.stopPropagation();
$('ul', this).toggle();
});
});
HTML code
<ul class="headcat">
<li>item 1
<ul class="subcat">
<li>subitem 1
<ul class="subcat">
<li>subsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubitem 2
<ul class="subcat">
<li><p>text</p></li>
<li>subsubsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubsubitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</li>
</ul>
You need to only select direct descendants of the currently clicked li, try this:
$(this).children("ul").toggle();
The following will also work, however it's not considered best practice to use the > descendant selector without a primary element before it.
$('> ul', this).toggle();
Example fiddle
Or try to hide the first subcat only on init:
$('ul.subcat:first').hide();
DEMO here: http://jsfiddle.net/kv4dT/
I am using mootools-more.1817.js...this is my HTML structure:
<ul id="categories">
<div id="admin">Admin Controls</div>
<li class="selected">Test
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Test 2
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Top Links
<ul>
<li id="article">Link 1</li>
<li id="article">Link 2</li>
<li id="article">Link 3</li>
<li id="article">Link 4</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Lame Links
<ul>
<li id="article">Link 9</li>
<li id="article">Link 10</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Awesome Links
<ul>
<li id="article">Link 11</li>
<li id="article">Link 12</li>
</ul>
</li>
</ul>
So I want to do two things:
Be able to drag each li item to another section and have it take all its children with it. E.g. if I am dragging the li that has the link Top Links, I want to drag not only the words Top Links, but also the div#admin, ul and li that are children of that parent li. Essentially all the children of each li.
I would also like to be able to drag items between lists of the children. So for instance, say I want to drag the link Link 2 from that ul to the section called Awesome Links and drop it between the links Link 11 and Link 12.
I have done this:
window.addEvent('domready', function(){
new Sortables('#categories', {
clone: true,
revert: true,
opacity: 0.7
});
});
What that does is drags JUST the li, and not the children of the li.
How do I achieve those?
Thanks.
First, you have invalid HTML by having div items in your categories list that are not in li tags themselves. The only immediate children to a ul can be li for a valid list.
Second, according to the documentation, "To enable sorting between lists, one or more lists or id's must be passed using an array or a selector" (http://mootools.net/docs/more/Drag/Sortables). That means, to move items between your sublists, each ul must be passed into a sortables group (different than the categories group). This should solve your issue #2.
I'm not yet sure why it would not drag the whole contents of the li, though it may be the invalid HTML is causing issues.
I have a Nav bar that I created and it is 1 image with multiple image maps... is it possible to make sub menus from the image maps in the image/Nav Bar?
Instead of an image map, you should use a hidden unordered list for the sub menu (and show it with javascript when appropriate)
something like:
Menu Item
<ul class="submenu" style="display: none;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JS:
$("#menuitem1").click(function() {
$(this).next().show();
});
try having a look at jQuery you might be able to attach a click event to an areas id which activates a hidden div with the sub menu items. www.jquery.com