1

それが起こるはずです：

メニュー項目の 1 つをクリックすると、既に開いているコンテナーが上にスライドし、クリック コンテナーが下にスライドする別の項目をクリックすると、テキスト コンテナーが下にスライドするはずです。しかし、どのように「兄弟」を試しましたが、それは私が望むようには機能しませんでした。

そして、それは私がすでにどれくらい離れているかです

<style>

 .read_more, .read_it, .read_that, .read_this{
  color: black;
  font-size: 20px;
  font-weight:bold;
  }

 .inhalt, .inhalt_it, .inhalt_this, .inhalt_that{
  display:none;
  }
 li{
  display: inline;
  list-style-type: none;
  }


</style>
</head>

<body>

<a class="read_more">BTN 1</a>
<div class="inhalt">
 text 1
</div>

<ul>
<li class="read_it">BTN 2</a></li>
<li class="read_that">BTN 3</a></li>
<li class="read_this">BTN 4</a></li>
</ul>
<div class="inhalt_it">
 text 2
</div>
<div class="inhalt_that">
 text 3
</div>
<div class="inhalt_this">
 text 4
</div>


<script>
     $('.read_more').click(function() {
       $(this).nextAll('div.inhalt:first').slideToggle("slow").siblings('div.inhalt_it, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', '#F00F');

     });

     $('li.read_it').click(function(){
      $(this).nextAll('div.inhalt_it:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', 'Yellow');

     });

     $('li.read_this').click(function(){
      $(this).nextAll('div.inhalt_this:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_it, div.inhalt_that').slideUp('slow').css('background', 'Blue');


     });

     $('li.read_that').click(function(){
      $(this).nextAll('div.inhalt_that:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_it, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', 'Red');



     });
</script>

このような順序の問題を修正しようとしました

        <script>
    //
        $('.read_it').click(function(){
                $(this).siblings('div.inhalt, div.inhalt_prozesse, div.inhalt_recht').slideUp('slow', function(){
                    $(this).nextAll('div.inhalt_it:first').slideToggle("slow").css('background', 'Yellow');
                });
    //
             </script>

どうすればそれを達成できますか?!?
私はすでに助けてくれてありがとうと言います.....

私はそれを最もエレガントな方法ではないかもしれませんが、うまくいきます....誰かがそれ
を改善する方法を教えてくれたら、私はとても感謝します...

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 

<style>
    .inhalt, .inhalt1, .inhalt2, .inhalt3{
        display: none;
        }

        .read1, .inhalt_1, .inhalt_2, .inhalt_3{
        color: black;
        font-size: 20px;
        font-weight:bold;
        }

        ul{
            display: inline;
            list-style-type: none;
            }
            li{
                display: inline;
            }


</style>

</head>

<body>

<a class="read1">BTN1</a>
    <div class="inhalt">
        content.<br />
    </div>
    <br />

<a class="inhalt_1">BTN2</a>
<a class="inhalt_2">BTN3</a>
<a class="inhalt_3">BTN4</a>



    <div class="inhalt1">
        Some content1.<br />
    </div>

    <div class="inhalt2">
        Some content2.<br /><br />
    </div>

    <div class="inhalt3">
        Some content3.<br />
    </div>
<script>

$(document).ready(function(){

// BTN 1 begin
    $('.read1').click(function(){
        if ($('div.inhalt1').css('display') == 'block'){
            $('div.inhalt1').slideUp('slow', (function(){
                $('div.inhalt').slideToggle('slow')
            }))
            }
            else if($('div.inhalt2').css('display') == 'block'){
                $('div.inhalt2').slideUp('slow', (function(){
                    $('div.inhalt').slideToggle('slow')
                }))
            }
            else if($('div.inhalt3').css('display') == 'block'){
                $('div.inhalt3').slideUp('slow', (function(){
                    $('div.inhalt').slideToggle('slow')
                }))
            }
            else{
                $(this).nextAll('div.inhalt:first').slideToggle('slow');
                }
                });
// BTN 1 end        

// BTN 2 begin      
        $('.inhalt_1').click(function(){
            if ($('div.inhalt').css('display') == 'block'){
                $('div.inhalt').slideUp('slow', (function(){
                    $('div.inhalt1').slideToggle('slow')
                    }))
                }
                else if($('div.inhalt2').css('display') == 'block'){
                    $('div.inhalt2').slideUp('slow', (function(){
                        $('div.inhalt1').slideToggle('slow')
                        }))
                }
                else if($('div.inhalt3').css('display') == 'block'){
                    $('div.inhalt3').slideUp('slow', (function(){
                        $('div.inhalt1').slideToggle('slow')
                }))
                }
                else{
                    $(this).nextAll('div.inhalt1:nth(0)').slideToggle('slow');
                    }
                    });
// BTN 2 end

// BTN 3 begin

    $('.inhalt_2').click(function(){
        if ($('div.inhalt').css('display') == 'block'){
                $('div.inhalt').slideUp('slow', (function(){
                    $('div.inhalt2').slideToggle('slow')
                    }))
                }
                else if($('div.inhalt1').css('display') == 'block'){
                    $('div.inhalt1').slideUp('slow', (function(){
                        $('div.inhalt2').slideToggle('slow')
                        }))
                }
                else if($('div.inhalt3').css('display') == 'block'){
                    $('div.inhalt3').slideUp('slow', (function(){
                        $('div.inhalt2').slideToggle('slow')
                }))
                }
                else {
                    $(this).nextAll('div.inhalt2:first').slideToggle('slow');
                    }
                    })

// BTN 3 end

// BTN 4 begin

$('.inhalt_3').click(function(){
        if ($('div.inhalt').css('display') == 'block'){
                $('div.inhalt').slideUp('slow', (function(){
                    $('div.inhalt3').slideToggle('slow')
                    }))
                }
                else if($('div.inhalt1').css('display') == 'block'){
                    $('div.inhalt1').slideUp('slow', (function(){
                        $('div.inhalt3').slideToggle('slow')
                        }))
                }
                else if($('div.inhalt2').css('display') == 'block'){
                    $('div.inhalt2').slideUp('slow', (function(){
                        $('div.inhalt3').slideToggle('slow')
                }))
                }
                else {
                    $(this).nextAll('div.inhalt3:first').slideToggle('slow');
                    }
                    })


// BTN 4 end


});

</script>
4

2 に答える 2

1

これが古いエントリであることは知っていますが、とにかく回答を投稿すると思いました。誰かを助けるかもしれません。

コードで改善できることがいくつかあります。まず、すべてのクラスが一意であるように見えるため、より高速な ID を使用することをお勧めします。

次のようにハッシュにリンクすることで、リスをそれぞれのコンテンツに向けます

<nav>
    <li><a href="#Inhalt1">btn1</a></li>
</nav>

次に、JavaScript はコンテンツを非表示にし、クリックしたものをスライド切り替えます

var content = ("#inhalt1, #inhalt2, #inhalt3");
   $(content).hide();
   $("nav a").click(function(e){
   e.preventDefault();
   $(content).hide();
   $($(this).attr("href")).slideToggle();
于 2011-05-12T05:38:02.547 に答える
0

スクリプトは jquery 初期化関数に含まれていません。すべてのスクリプトを次の場所に配置する必要があります。

$(function(){
// Put your code here
});

また

$(document).ready(function(){
// Put your code here
});
于 2010-07-27T14:44:05.053 に答える