JavaScript的顯示作品，但不隱藏

Question

您好我正在運行一個相當簡單的腳本，顯示單擊時隱藏div中的內容。問題是「隱藏」元素不能正常工作「顯示」。

<script type="text/javascript"> 
    $(function() { 
    $(".slidingDiv").hide(); 
    $(".hide, .show").show().on('click', function(e) { 
     var elm = $(e.target).is('.show') ? $(e.target) : $(e.target).parent().prev('.show'); 
     elm.toggle().next(".slidingDiv").slideToggle() 
    }); 
}); 
</script> 

<style type="text/css"> 
.slidingDiv { 
    display: none; 
    height:200px; 
    width:auto; 
} 
</style 

<div id="footer-widgets-container"> 
    <div id="footer-widgets" class="col-full col-4"> <a href="#" class="show">Show</a> 

     <div class="slidingDiv"> 
      <div class="block footer-widget-1 widget"> 
       <div class="col1a"></div> 
       <div class="col3c"></div> 
       <div class="col2b"></div> 
      </div> 
      <div class="block footer-widget-2"></div> 
      <div class="block footer-widget-3"></div> 
      <div class="block footer-widget-4"> 
       <div class="skype p"><a href="#"><p>Skype</p></a> 
       </div> 
       <div class="email p"><a href="#"><p>Email</p></a> 
       </div> 
      </div> 
     </div> 
    </div><a href="#" class="hide">Hide</a> 

</div> 

Answer 1

這是因爲你使用了錯誤的選擇。

你既可以改變你的hide標記，以便它是正確的div內或改變這樣的代碼：

<script type="text/javascript"> 
    $(function() { 
     $(".slidingDiv").hide(); 
     $(".hide, .show").show().on('click', function(e) { 
      var elm = $(e.target).is('.show') ? $(e.target) : $(e.target).parent().find('.show'); 
      elm.toggle().next(".slidingDiv").slideToggle() 
     }); 
    }); 
</script> 

我已經改變了$(e.target).parent().prev('. show')到$(e.target).parent().find('.show')因爲show不是div內。

希望它有幫助。