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

您应该以这种方式使用.toggle()： JSFIDDLE 并确保在标题中包含jQuery和jQuery UI（"drop" is a jQuery UI feature）

jQuery的：

$(document).ready(function(){
  $('.ShowHideClicker').click(function(){
    $('.ShowHideList').toggle('drop', 1000);
  });
});

CSS：

.ShowHideList { display: none; }

Answer 2

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

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

http://jsfiddle.net/LcYLY/

切换隐藏和显示

2 个答案: