javascript - 切换隐藏和显示

Question

我已尽一切努力让它切换显示和隐藏，但每次我在函数中添加隐藏时，它都会停止工作，或者我可以让隐藏完美地工作，而显示根本不起作用。任何帮助将不胜感激。

<div class="ShowHideClicker clear" >
  <img src="something.gif"></div> <div class="ShowHideList"> 
  <div class="ui-widget" id="SearchBar"> 
    <label for="tags">Search:</label> 
    <input id="tags">
    <button class='clear' id="ClearButton"> Clear</button> 
  </div> 
  <div id="Result"></div> 
</div>

$(document).ready(function(){
     $('.ShowHideList').hide();
     $('.ShowHideClicker').click(function(){
          $(this).next().show('drop', {direction: 'left'}, 1000);
     });
});

Answer 1

这是使用 toggleClass 的简单解决方案:

$('.ShowHideClicker').on('click', function(){
    $(this).next().toggleClass('hidden');
});

http://jsfiddle.net/LcYLY/