当前位置： 文江博客话题详情

JQuery SlideToggle 应该滑动所有其他显示的容器

发布于 2024-09-11 10:33:46 字数 6997 浏览 6 评论 0原文

这就是应该发生的事情：

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

这就是我已经走了多远

<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>
原文

That's what sould happen:

I click on one of the menue items, the text container should slide down when i klick on an other the already opened container slide up and the clickt container slide down.
but how i tried "siblings" but that doesnt worked the way i want it to.

and that's how far i already am

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

I tryed to to fixed the order problem like this

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

How can I achieve that?!?
I already say thanks for any help.....

I made it may be not in the most ellegent way but it works....
if any one could tell me how it can be improved i'll be very thank full...

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

迷迭香的记忆 2024-09-18 10:33:46

我知道这是一个旧条目，但我想我还是发布了我的答案。可能会帮助某人。

您的代码有一些可以改进的地方。
首先，由于看起来所有类都是唯一的，我建议使用 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();

I know this is an old entry but I thought I post my answer anyway. Might help someone.

There are couple of things that could be improved with your code.
First since it looks like all of your classes are unique, I suggest using IDs because they are faster.

Point your lis to their respective content by linking to their hash like so

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

Then the JavaScript will hide your content and slideToggle the one you click

var content = ("#inhalt1, #inhalt2, #inhalt3");
   $(content).hide();
   $("nav a").click(function(e){
   e.preventDefault();
   $(content).hide();
   $($(this).attr("href")).slideToggle();
回复 原文
戈亓 2024-09-18 10:33:46

您的脚本不包含在 jquery 初始化函数中。您应该将所有脚本放入：

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

或

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

Your script is not included in the jquery initialisation function. You should put all your script in:

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

or

$(document).ready(function(){
// Put your code here
});
回复 原文
~没有更多了~

关于作者

放低过去

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文