Быстрая помощь с некоторым переключателем jQuery

Question

У меня есть следующий код:

<script>
    $(document).ready(function() {
        $('.toggle_section').click(function(e){
            parent = $(e.target).closest("div")
            objChild = parent.children('div');
            $('.sectionContentId').hide(400);
            $(objChild).toggle(400);
        });
    });

</script>

<br />
<div class="box" id="parent_section_1">
    <strong>
        <a class="toggle_section" href="javascript:;">New Section 1</a>
    </strong>
    <div class="sectionContentId" id="section_1" style="display: none">
        <br />
        Contents<br />for<br />section<br />1
    </div>
</div>

<br />

<div class="box" id="parent_section_2">
    <strong>
        <a class="toggle_section" href="javascript:;">New Section 2</a>
    </strong>

    <div class="sectionContentId" id="section_2" style="display: none">
        <br />
        Contents<br />for<br />section<br />2
    </div>
</div>

И пример можно увидеть здесь

Как вы видите, я пытаюсь сделать так, чтобы при нажатии на одну из ссылок все остальные "уже развернутые разделы" разваливались, а выбранный раздел расширялся.

это отлично работает, как есть, но, очевидно, с использованием логики:

$('.sectionContentId').hide(400);
$(objChild).toggle(400);

Когда я щелкаю один из расширенных разделов в попытке закрыть его, он на короткое время закрывается и открывается снова.

Я хочу сохранить ту же функциональность, но хочу иметь возможность открывать и закрывать раздел, нажимая на ссылку, а также, когда я открываю раздел, я не хочу закрывать все перед открытием этого нового раздела .

Я не уверен, что здесь я очень ясно, но, посмотрев на пример, вы сможете лучше понять, что я имею в виду.

Заранее спасибо

Answer 1

ДЕМО: http://jsbin.com/uguto3/3/edit

Вы можете сделать это с меньшим количеством кода, просто добавив класс переключателя в сильный тег

<strong class="toggle_section">

как это

  $('.toggle_section').click(function() {
     $('.sectionContentId').slideUp(400);
    if($(this).next().is(':hidden')) 
      $(this).next().slideDown(400);            
   });

Answer 2

Попробуйте это:

$("a.toggle_section").click(function() {
  var sections = $("div.box > div");
  var current = $(this).closest("div.box").children("div");
  sections.not(current).stop().hide(400, function() {
    current.toggle(400);
  });
  return false;
});

Если я вас правильно понимаю, это должно делать то, что вы хотите, а именно:

При нажатии на соответствующую ссылку все разделы для других ссылок скрываются. После того, как они скрыты, текущий переключается.

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

Редактировать: , чтобы показать тот, который вы щелкнули, и скрыть остальные одновременно:

$("a.toggle_section").click(function() {
  var sections = $("div.box > div");
  var current = $(this).closest("div.box").children("div");
  sections.not(current).stop().hide(400);
  current.show(400);
  return false;
});

Answer 3

Вы можете попробовать плагин, который я сделал сам, изменить его или посмотреть, как это сделать.

Answer 4

Если проблема в том, что элемент скрывается, а затем мгновенно отображается, вы можете удалить его из элементов, выбранных для скрытия ... в этом примере все элементы с class = "sectionContentId", за исключением случаев, когда id = "elemid »...

$('.sectionContentId:not(#elemid)').hide(400);