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="#">Item1</a>
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3</li>
        </ul>
    </li>
    <li><a href="#">Item2</a>
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
        </ul>
    </li>
    <li><a href="#">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 с идентификатором #listsItems и выберите ширину, например, или вы можете рассчитать ближайшую к ‹a›... вы делаете, как хотите, и смотрите, что работает для вас - person mlwacosmos; 29.05.2013

arrow_upward
0
arrow_downward

Попробуй это,

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

Fiddle http://jsfiddle.net/8jedA/

person Rohan Kumar    schedule 29.05.2013
comment
Это отлично спасибо. Отлично, это почти идеально, единственное, что я хотел бы, чтобы он делал в дополнение к этой функциональности, - это скрывать открытые элементы при щелчке от открытого контента, спасибо! - person Dave; 29.05.2013