Question

首先抱歉我的弱英语，我使用slide.toggle函数，当我有一个元素它工作正常，但当我添加多个元素（div标签），它崩溃或只为第一个元素工作，如果我将id转换为javascript中的class属性，它作用于所有元素，但我想只是在点击哪个元素，并改变该元素的大小而不是其他人或所有元素，我搜索了，似乎$(this).parent(".slidingDiv").slideToggle();将解决我的问题，但我不知道如何在javascript中设置它，这里是网址：http://itsun.ir/test/

这是我的项目和问题的现场演示，有人可以帮我解决这个问题吗？

这是我使用的代码：

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

        if (document.getElementById("container").style.display == 'none') {
            document.getElementById("ad").className =
document.getElementById("ad").className.replace
  ( /(?:^|\s)inactive(?!\S)/g , '' )
            document.getElementById("ad").className = " active";

            document.getElementById("au").className =
document.getElementById("au").className.replace
  ( /(?:^|\s)active(?!\S)/g , '' )
            document.getElementById("au").className = " inactive";

        }else{
            document.getElementById("ad").className =
document.getElementById("ad").className.replace
  ( /(?:^|\s)active(?!\S)/g , '' )
            document.getElementById("ad").className = " inactive";


            document.getElementById("au").className =
document.getElementById("au").className.replace
  ( /(?:^|\s)inactive(?!\S)/g , '' )
            document.getElementById("au").className = " active";

        }


    $(".content").slideToggle("slow");




    });
});

这里是html代码：

          <div id="wrapper">
              <div class="box" id="box"style="width:95%;">
                <div class="top_bar" style="width:100%; height:40px; background-color:#01afee;">
                                    top bar 1   
                </div>

                <div id="container" class="content" style="display:block;">
                            TExt 1
                </div>
            </div>


            <div class="box" id="box"style="width:95%;">
                <div class="top_bar" style="width:100%; height:40px; background-color:#01afee;">
                                    top bar 2  
                </div>

                <div id="container" class="content" style="display:block;">
                            TExt 2
                </div>
            </div>



            <div class="box" id="box"style="width:95%;">

                <div class="top_bar" style="width:100%; height:40px; background-color:#01afee;">
                                    top bar 3    
                </div>

                <div id="container" class="content" style="display:block;">
                            TExt 3
                </div>
            </div>


        </div>

如何使用幻灯片切换多个div标签

0 个答案: