0

私のウェブサイトでは、特定のボタンをクリックすると、fadeToggle と slideToggle が同時にトグルされます。別のボタンをクリックすると、まったく同じことが行われますが、内容が異なります。ただし、両方を押すと、同期がずれてしまいます。1 つは切り替えられ、もう 1 つは切り替えられません。

プレス情報と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>

.next('.content')ここで、jQuery を使用してクリック可能な要素を検索します。

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 に答える