jQuery toggle from different button

Question

Что я хочу сделать, это переключить элемент, когда я нажимаю кнопку. У меня больше кнопок, которые запускают событие переключения. То, что немного сложнее, - если div уже показан, переключается на невидимое, чем показано снова. Дело в том, что элемент, который будет показан, содержит информацию, сгенерированную ajax.

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

Вот HTML:

<div class="row"> 
    <button id="classOption1" class="btn btn-primary toggleOptions">firstButton</button> 
    <button id="classOption2" class="btn btn-primary toggleOptions">secondBotton</button> 
    <button id="classOption3" class="btn btn-primary toggleOptions">thirdButton</button> 
    <button id="classOption4" class="btn btn-primary toggleOptions">yet another button</button> 
</div> 

<div class="classOptions"> 
    //some irrelevant HTML here 
</div> 

$(".toggleOptions").click(function(){ 
    var trigger = $(".toggleOptions").attr('id'); 
    if (trigger != $(this).attr('id')) { 
     $(".classOptions").toggle(1000).promise().done(function() { 
      trigger = $(this).attr('id'); 
     }); 
     $(".classOptions").toggle(1000); 
    } else { 
     $(".classOptions").toggle(1000).promise().done(function() { 
      trigger = $(this).attr('id'); 
     }); 
    } 
}); 

Если я нажимаю на первый firstButton, затем на secondButton, это работает. Но если я снова нажму на secondButton, чтобы скрыть элемент, он просто скрывается и снова отображается. Однако, если я снова нажму на firstButton, он скрывает элемент по своему усмотрению.

JsFiddle код воспроизведения.

Надеюсь, я сделал себя понятным, а не моим первым языком.

Answer 1

Как я понял:

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

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

в этом случае вы можете изменить селектор, чтобы знать, если элемент виден или не нравится:

var isVisible = $(".classOptions:visible").length > 0; 

И если вы хотите, чтобы сделать DIV «мигать», когда уже скрылось просто проверить:

$(".toggleOptions").click(function(){ 
    var isVisible = $(".classOptions:visible").length > 0; 

    $(".classOptions").toggle(1000); 

    if(!isVisible){ 
     $(".classOptions").toggle(1000); 
    }  
}); 

Извините, если я не понимаю, вам ясно.

JSFiddle reproduction

Answer 2

Удалить этот код $(".classOptions").toggle(1000); от вашего решения.

$(".toggleOptions").click(function(){ 
    var trigger = $(".toggleOptions").attr('id'); 
    if (trigger != $(this).attr('id')) { 
     $(".classOptions").toggle(1000).promise().done(function() { 
      trigger = $(this).attr('id'); 
     }); 
    } else { 
     $(".classOptions").toggle(1000).promise().done(function() { 
      trigger = $(this).attr('id'); 
     }); 
    } 
}); 

Answer 3

Просто найти правильный путь, вот код:

$(document).ready(function() { 

      var selector; 
      var lastSelector = null; 

      $(".toggleOptions").click(function(){ 

       selector = $(this).attr('id'); 

       if(lastSelector != selector && lastSelector != null){ //different button clicked or page just loaded 
        if($(".classOptions").is(":visible")){ // element is shown, so we hide and show again 
         $(".classOptions").toggle(1000); // toggle to invisible 
         $(".classOptions").toggle(1000).promise().done(function() { 
          lastSelector = selector; 
         }); 
        } else { // element is hidden, just show it 
         $(".classOptions").toggle(1000).promise().done(function() { 
          lastSelector = selector; 
         }); 
        } 
       } 

       if(lastSelector == selector || lastSelector == null){ // same button pressed twice, toggle as intended 
        $(".classOptions").toggle(1000).promise().done(function() { 
         lastSelector = selector; 
        }); 

       } 


       $("#lastSelector").text("Last Selector: " + lastSelector); 
       $("#thisSelector").text("Just Clicked: " + selector); 

      }); 
     }); 

http://jsfiddle.net/3qjeqqkk/32/ Спасибо, ребята за помощь! Позор, я не могу проголосовать.