1

这就是应该发生的事情：

我单击其中一个菜单项，当我单击另一个已打开的容器向上滑动并且 clickt 容器向下滑动时，文本容器应该向下滑动。但是我如何尝试“兄弟姐妹”，但这并没有按照我想要的方式工作。

这就是我已经走了多远

<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，因为它们更快。

通过像这样链接到他们的哈希将您的 lis 指向他们各自的内容

<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 回答