0

在我的网站上，如果您单击某个按钮，它会同时切换 fadeToggle 和 slideToggle。如果您单击不同的按钮，则执行完全相同的操作，但内容不同。但是，如果您同时按下两者，它们最终会不同步。一个是切换的，另一个不是。

新闻信息和 THEN 客户，它弄乱了切换。它们变得不同步。

有没有办法避免这种重叠？

这是jQuery：

   <script type="text/javascript">
  $(document).ready(
    function(){

        $('#stop').click(function (e) { 
    e.preventDefault(); });

         $('#information').click(function() {
   $("#projectwrap").slideToggle('slow'); 
   $("#us").fadeToggle('slow');
   });

      $('#clients').click(function() {
   $("#projectwrap").slideToggle('slow'); 
   $("ul").fadeToggle('slow');
   });


});
</script>

如果你很困惑，我也是！

4

1 回答 1

0

jsBin 演示

合乎逻辑的问题是您要#projectwrap同时切换#information并#clients单击！根本没有意义的是，您不能再单击该#title元素来查看主要内容。这是一个糟糕的UX（用户体验）。

您应该使用这个 HTML 结构：.toggler为所有可点击元素添加一个类，并在内部元素上切换状态.content！

<div id="stop"> 
 
  <div id="clients">
    <h2 class="toggler">clients</h2>
    <div class="content" style="display:none;">
      <ul>
        <li>list</li>
        <li>list</li>
        <li>list</li>
        <li>list</li>
      </ul>  
    </div>
  </div>
  
  <div id="projectwrap">
    <h1 class="toggler">projectwrap</h1>
    <div class="content">
      <p>text here.........</p>
    </div>
  </div>
  
  <div id="information">
    <h2 class="toggler">info</h2>
    <div class="content" style="display:none;">
       about us..........
     </div>
  </div>
  
</div>

现在我们将使用 jQuery 搜索可点击.next('.content')元素！

jQuery：

$('#stop').click(function (e) { 
     e.preventDefault();
});
   
$('.toggler').click(function() {
  var $nextContent = $(this).next('.content');
  var nextContIsHidden = $nextContent.is(':hidden');
  if(nextContIsHidden){
    $('.content:visible').slideUp('slow'); // hide all visible
    $nextContent.slideDown('slow');    
  }else{                          // if we're clicking the title of the visible one
    $nextContent.slideUp('slow'); // if is already visible hide it
    $('#projectwrap .content').slideDown('slow'); // and slide the main content
  }
});
于 2012-09-17T22:39:22.950 回答