jQuery .show() - показване / скриване за множество елементи

Опитвам се да постигна това:

  1. Създайте страница с множество списъци, всеки от които съдържа вложен списък, който да се показва, когато се щракне върху връзка.

  2. Когато се щракне върху връзка и се разкрие съдържанието, при щракване върху друга връзка, разкритото преди това съдържание се скрива, а новото се разкрива.

  3. Когато щракнете където и да е на страницата извън разкритото съдържание, това щракване ще скрие елемента.

Ето писалка, показваща, че действието за разкриване работи според очакванията, но това не функционира, както бих искал досега.

http://codepen.io/juxprose/pen/pzvuC

Всякакви насоки ще бъдат много оценени.

Благодаря.


hide jquery show
person Dave    schedule 29.05.2013    source източник
comment
Възможен дубликат: stackoverflow .com/questions/152975/   -  person dewd    schedule 29.05.2013

Отговори (3)


arrow_upward
2
arrow_downward

Опитайте тази:

$('.trigger').click(function (e) {
    e.stopPropagation();
    $('.show').hide();    
    $(this).next('.show').slideDown();
});

$(document).click(function () {
    $('.show').slideUp();    
});

ДЕМО НА FIDDLE

person palaѕн    schedule 29.05.2013
comment
Това е добре - благодаря! Единственият проблем тук е, че затваря отвореното съдържание, когато щракнете върху самото това съдържание. Може да има връзки в това съдържание, така че щракването върху самото съдържание не трябва да го скрива. Много благодаря за отговора :) - person Dave; 29.05.2013

arrow_upward
1
arrow_downward

Този код трябва да прави това, което искате, ако разбрах добре:

html:

<ul id="listItems">
    <li><a href="/bg#">Item1</a>
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3</li>
        </ul>
    </li>
    <li><a href="/bg#">Item2</a>
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
        </ul>
    </li>
    <li><a href="/bg#">Item3</a>
        <ul>
            <li>Item 3.1</li>
            <li>Item 3.2</li>
            <li>Item 3.3</li>
        </ul>
    </li>
</ul>

js :

$(document).ready(function() {
   $("#listItems ul").hide();
   $("#listItems a").on("click", function() {
       $("#listItems ul").hide();
       $(this).next().show();
   });
   $(document).click(function(e) {
    if ( $(e.target).closest('#listItems').length === 0 ) {
        $("#listItems ul").hide();
    }
   });
});
person mlwacosmos    schedule 29.05.2013
comment
Благодаря за това! Добре е, но когато използвам няколко UL на страницата (както планирам), функцията за кликване не работи толкова добре, направих нова писалка за вашата тук: codepen.io/juxprose/pen/oHKkf - person Dave; 29.05.2013
comment
Нормално е.. използвате един и същи идентификатор... идентификаторът е уникален, но имате няколко пъти един и същ... вместо да използвате идентификатор, използвайте клас и променете кода, за да използвате .listsItems вместо #listItems - person mlwacosmos; 29.05.2013
comment
така че работи... просто вашият ul е много дълъг, така че когато щракнете извън, можете да щракнете върху ul, за да не изчезне... Можете да поставите всичко това в div с id #listsItems и изберете ширина например или можете да изберете да изчислите най-близкото до ‹a›... правите както желаете и вижте какво работи за вас - person mlwacosmos; 29.05.2013

arrow_upward
0
arrow_downward

Опитайте тази,

$('.trigger').click(function(){
    $('.show').slideUp();
    $(this).next('.show').slideDown(); 
});

Цигулка http://jsfiddle.net/8jedA/

person Rohan Kumar    schedule 29.05.2013
comment
Това е отлично благодаря. Страхотно, това е почти перфектно, единственото нещо, което бих искал да прави в допълнение към тази функционалност, е да скрие отворените елементи, когато се щракне далеч от отвореното съдържание, благодаря! - person Dave; 29.05.2013