通过jquery扩展div，需要额外的点击才能激活

时间：2013-12-11 08:04:45

标签： jquery html css

好的 - 我不是一个大jQuery用户 - 所以这可能是一个相当简单的解决问题，但由于我不确定是什么导致了这个困难，我在找到任何关于它的方面遇到了很多麻烦

问题：我在页面上有一系列div，一个在另一个上面。它们中的每一个都是在单击时执行相同的扩展功能，然后再次单击时收缩。最初，我曾计划为所有3个使用单个jquery脚本，但我无法弄清楚如何在没有同时打开所有3个div的情况下应用它。我继续使用3个相同的脚本，每个脚本都指向一个特定的div，这也使得它们缩放到正确的高度变得简单。但是，使用我当前的代码，一旦我点击3个div中的任何一个，它需要2次点击而不是一次，以使下一个执行其转换。如何解决这个问题？

代码：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
isLarge = false; 
$(document).ready(function(){
$(".dropdown_1").click(function(){
$(".dropdown_1").animate({height:(isLarge ? '33px' : '100px')});
isLarge = !isLarge;    
});
}); 

isLarge = false; 
$(document).ready(function(){
$(".dropdown_2").click(function(){
$(".dropdown_2").animate({height:(isLarge ? '33px' : '100px')});
isLarge = !isLarge;    
});
}); 

isLarge = false; 
$(document).ready(function(){
$(".dropdown_3").click(function(){
$(".dropdown_3").animate({height:(isLarge ? '33px' : '100px')});
isLarge = !isLarge;    
});
}); 
</script>
<style>
h4 {
width: 745px;
height: 26px;
display: inline-block;
border-bottom: 4px solid #740000;
padding-bottom: 3px;
padding-left: 5px;
font-size: 24px;
-webkit-text-shadow: 0px 1px 5px black;
-moz-text-shadow: 0px 1px 5px black;
text-shadow: 0px 1px 5px black;
margin: 0 0 5px 0;
}

h5 {
margin: 10px 0 10px 8px;
font-size: 18px;
-webkit-text-shadow: 0px 1px 5px black;
-moz-text-shadow: 0px 1px 5px black;
text-shadow: 0px 1px 5px black
}
    div.dropdown_1 {
-moz-transition: height 2s;
-ms-transition: height 2s;
-o-transition: height 2s;
-webkit-transition: height 2s;
background: #c06d00; 
height: 33px;
width: 750px;
position: relative;
overflow: hidden;
margin: 0 0 35px 25px;
-webkit-box-shadow: 0px 1px 10px 1px black;
-moz-box-shadow: 0px 1px 10px 1px black;
box-shadow: 0px 1px 10px 1px black;
background-image: url(images/dropdown_arrow.png);
background-position: right top;
background-repeat: no-repeat;
}

div.dropdown_2 {
-moz-transition: height 2s;
-ms-transition: height 2s;
-o-transition: height 2s;
-webkit-transition: height 2s;
background: #c06d00; 
height: 33px;
width: 750px;
position: relative;
overflow: hidden;
margin: 0 0 35px 25px;
-webkit-box-shadow: 0px 1px 10px 1px black;
-moz-box-shadow: 0px 1px 10px 1px black;
box-shadow: 0px 1px 10px 1px black;
background-image: url(images/dropdown_arrow.png);
background-position: right top;
background-repeat: no-repeat;
}

div.dropdown_3 {
-moz-transition: height 2s;
-ms-transition: height 2s;
-o-transition: height 2s;
-webkit-transition: height 2s;
background: #c06d00; 
height: 33px;
width: 750px;
position: relative;
overflow: hidden;
margin: 0 0 35px 25px;
-webkit-box-shadow: 0px 1px 10px 1px black;
-moz-box-shadow: 0px 1px 10px 1px black;
box-shadow: 0px 1px 10px 1px black;
background-image: url(images/dropdown_arrow.png);
background-position: right top;
background-repeat: no-repeat;
}
</style>
</head>

<body>
<div id="content">
    <a href="index.html">
    <div id="header_img_bwf">
    </div>
    </a>
    <div id="body">
        <h3>Programs</h3>
        <div class="dropdown_1">
            <h4>title</h4>
            <h5>title</h5>
            <p>text</p>
            <p>text</p>  
        </div>
        <div class="dropdown_2">
            <h4>title</h4>
            <h5>title</h5>
            <p>text</p>
            <p>text</p>                 
        </div>
        <div class="dropdown_3">
            <h4>title</h4>
            <h5>title</h5>
            <p>text</p>
            <p>text</p> 
        </div>
    </div>
</div>
</body>
</html>

如果有人能够指出我在这个方向上的正确方向，我将非常感激，提前感谢！

3 个答案:

答案 0 :(得分：1)

将您的dropdown_1，dropdown_2，dropdown_3重命名为dropdown，然后使用以下代码。 

$(document).ready(function () {
    $(".dropdown").click(function () {
        var height = '33px';
        if ($(this).hasClass("open")) {
            height = '33px';
            $(this).removeClass("open");
        } else {
            height = '100px';
            $(this).addClass("open")
        }
        $(this).animate({
            height: height
        });
    });
});

http://jsfiddle.net/Xxuzt/

答案 1 :(得分：0)

您的isLarge变量对于3个div是通用的。您应该单独命名（isLarge1，isLarge2，isLarge3）。

答案 2 :(得分：0)

            <HTML>
            <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
            </script>
            <script>
            $(document).ready(function(){
                initAccordian();
            });

            function initAccordian(){
                $("div.dropdown").click(function(){
                    collapsAllOtherDivs();
                    //--here $(this) refer to currently clicked Div.
                    if($(this).height()==33){
                        $(this).animate({height:('100px')});
                    }else{
                        $(this).animate({height:('33px')});
                    }
                });
            }

            function collapsAllOtherDivs(){
                $("div.dropdown").animate({height:('33px')});
            }
            </script>

            <style>
            h4 {
                width: 745px;
                height: 26px;
                display: inline-block;
                border-bottom: 4px solid #740000;
                padding-bottom: 3px;
                padding-left: 5px;
                font-size: 24px;
                -webkit-text-shadow: 0px 1px 5px black;
                -moz-text-shadow: 0px 1px 5px black;
                text-shadow: 0px 1px 5px black;
                margin: 0 0 5px 0;
            }

            h5 {
                margin: 10px 0 10px 8px;
                font-size: 18px;
                -webkit-text-shadow: 0px 1px 5px black;
                -moz-text-shadow: 0px 1px 5px black;
                text-shadow: 0px 1px 5px black
            }

            div.dropdown {
            -moz-transition: height 2s;
            -ms-transition: height 2s;
            -o-transition: height 2s;
            -webkit-transition: height 2s;
            background: #c06d00;
                height: 33px;
                width: 750px;
                position: relative;
                overflow: hidden;
                margin: 0 0 35px 25px;
                -webkit-box-shadow: 0px 1px 10px 1px black;
                -moz-box-shadow: 0px 1px 10px 1px black;
                box-shadow: 0px 1px 10px 1px black;
                background-image: url(images/dropdown_arrow.png);
                background-position: right top;
                background-repeat: no-repeat;
            }
            </style>

            </head>
                <body>
                <div id="content">
                    <a href="index.html">
                    <div id="header_img_bwf">
                    </div>
                    </a>
                    <div id="body">
                        <h3>Programs</h3>
                        <div class="dropdown">
                            <h4>title</h4>
                            <h5>title</h5>
                            <p>text</p>
                            <p>text</p>
                        </div>
                        <div class="dropdown">
                            <h4>title</h4>
                            <h5>title</h5>
                            <p>text</p>
                            <p>text</p>
                        </div>
                        <div class="dropdown">
                            <h4>title</h4>
                            <h5>title</h5>
                            <p>text</p>
                            <p>text</p>
                        </div>
                    </div>
                </div>
                </body>
            </HTML>

http://jsfiddle.net/9V4MJ/

相关问题
最新问题