jQuery: закрыть то, что открыто, открыть то, что закрыто - PullRequest
Новая
       59

jQuery: закрыть то, что открыто, открыть то, что закрыто

1 голос
/ 09 июля 2011

Я работаю над простым аккордеонным вертикальным меню:

http://www.cybart.com/bscg/

Нажатие на НАШИ РЕШЕНИЯ, ПОКРЫТИЕ ИЗДЕЛИЯ, НАША КОМАНДА или КОНТАКТ США открывает или закрывает подменю.

Однако, если вы нажмете на две или более из этих ссылок подряд, откроются все подменю.

Я хочу первым щелчком мыши по любому из пунктов меню открыть его подменю и закрыть те, которые открыты в данный момент.Второй щелчок должен просто закрыть подменю ссылки, по которой щелкают.

Буду признателен за опытный совет.

1 Ответ

3 голосов
/ 09 июля 2011

Проверьте jQuery: видимый селектор. На событии щелчка сдвиньте вверх тот, который уже виден, и сдвиньте вниз тот, который вы хотите открыть.

РЕДАКТИРОВАТЬ: Вот фрагмент кода, который я использовал в прошлом, чтобы сделать это. Примечание. Я использую списки определений (dl, dt, dd) вместо неупорядоченных списков (ul и li), но вы можете адаптировать код: 

$("dt span").click(function () {
   var dd = $(this).parent().next();
    if (dd.is(":visible")) {
        dd.slideUp("slow");
    } else {
        $("dd:visible").slideUp("slow");
        dd.slideDown("slow");
    }
});

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ: Фактический код в соответствии с запросом OP: 

<html>
  <head>
    <title>Accordion</title>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  </head>
  <body>
    <ul id="access">
      <!-- Use spans so that only clicks on the item name are processed -->
      <li><span class="item">Item 1</span>
        <ul>
          <li>Item 1 - A</li>
          <li>Item 1 - B</li>
          <li>Item 1 - C</li>
        </ul>
     </li>
      <li><span class="item">Item 2</span>
        <ul>
          <li>Item 2 - A</li>
          <li>Item 2 - B</li>
          <li>Item 2 - C</li>
        </ul>
     </li>
      <li><span class="item">Item 3</span>
        <ul>
          <li>Item 3 - A</li>
          <li>Item 3 - B</li>
          <li>Item 3 - C</li>
        </ul>
     </li>
    </ul>
    <script>
        $(document).ready(function () {

        // All sections rolled up to start
        $("ul#access ul").hide();

        // Open or close as necessary
        $("span.item").click(function () {
            var ul = $(this).next();
            if (ul.is(":visible")) {
                ul.slideUp("slow");
            } else {
                $("ul#access ul:visible").slideUp("slow");
                ul.slideDown("slow");
            }
        });
    });
    </script>
  </body>
</html>

Объяснение: Я использовал интервалы, чтобы только текст каждого элемента вызывал поведение аккордеона. Когда клик по диапазону, мы говорим $ (this) .next (), чтобы добраться до внутреннего ul. Если вы не используете интервалы и прикрепляете обработчик кликов к внешнему лику, то клики внутри подменю вызовут закрытие внешнего ли.

...