如何使用外部div切换另一个Div onClick的展开和缩小？

Question

我有一个div（.panel），当单击它时，它会扩展，而当再次单击它时，它会收缩。 而不是单击（.panel），如何单击外部div（.open）来扩大和缩小原始div（.panel），而不是使用（.panel）作为触发器？ 我问是因为我想使用外部图标作为触发器。

http://jsfiddle.net/lycrest15/z2p0r5s9/

<div class="open">open</div>
 <div id="effect" class="mores" style="background-color: brown">
<div class="panel">
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</div>


 var next_move = "expand";
 $(document).ready(function () {
 $(".panel").click(function () {

     console.log(next_move);
     var css = {};
     if (next_move == "expand") {
         css = {
             width: '210px',
             height: '170px'
         };
         next_move = "shrink";
     } else {
         css = {
             width: '30px',
             height: '20px'
         };
         console.log('hi');
         next_move = "expand";
     }
     $(this).animate(css, 200);

   });

 });




   .panel {
   width: 30px;
   height: 21px;
   overflow: hidden;
   color:white;
background-color: grey;
  }
 .panel ul {
margin-left:10%;
color:white;
}
.mores {
width: 210px;
height: 170px;
overflow: hidden;
}
.open {
width: 50px;
hieght:50px;
}

Answer 1

您可以这样使用.open元素：

  var next_move = "expand"; $(document).ready(function () { $(".open").click(function () { console.log(next_move); var css = {}; if (next_move == "expand") { css = { width: '210px', height: '170px' }; next_move = "shrink"; } else { css = { width: '0', height: '0' }; console.log('hi'); next_move = "expand"; } $(".panel").animate(css, 200); }); }); 

 .panel { width: 0; height: 0; overflow: hidden; color:white; background-color: grey; } .panel ul { margin-left:10%; color:white; } .mores { width: 210px; height: 170px; overflow: hidden; } .open:hover { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="open">open</div> <div id="effect" class="mores" style="background-color: brown"> <div class="panel"> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </div> 

Answer 2

我将应用CSS过渡并使用jquery toggleClass()方法，如下所示：

 $(document).ready(function() { $(".panel,.open").click(function() { $(".panel").toggleClass("expand"); }); }); 

 .panel { width: 30px; height: 21px; overflow: hidden; color: white; background-color: grey; -webkit-transition: 0.2s linear; -ms-transition: 0.2s linear; -moz-transition: 0.2s linear; -webkit-transition: 0.2s linear; } .panel.expand { width: 210px; height: 170px; } .panel ul { margin-left: 10%; color: white; } .mores { width: 210px; height: 170px; overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="open">open</div> <div id="effect" class="mores" style="background-color: brown"> <div class="panel"> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </div> </div> 

---

如果必须使用animate() ，则可以执行以下操作：

 $(".panel,.open").click(function() { width = ($(".panel").width() == 30) ? 210 : 30; height = ($(".panel").height() == 20) ? 170 : 20; $(".panel").animate({ width: width, height: height }, 200); }); 

 .panel { width: 30px; height: 20px; overflow: hidden; color: white; background-color: grey; } .panel ul { margin-left: 10%; color: white; } .mores { width: 210px; height: 170px; overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="open">open</div> <div id="effect" class="mores" style="background-color: brown"> <div class="panel"> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </div> </div> 

Answer 3

您的意思是这样的：

  var next_move = "expand";
 $(document).ready(function () {
 $(".open").click(function () {
     console.log(next_move);
     var css = {};
     if (next_move == "expand") {
         css = {
             width: '210px',
             height: '170px'
         };
         next_move = "shrink";
     } else {
         css = {
             width: '30px',
             height: '20px'
         };
         console.log('hi');
         next_move = "expand";
     }
     $('.panel').animate(css, 200);



 });

});

另外，请注意#effect没有结束div

Answer 4

检查这个小提琴

这是我用过的JavaScript

$(document).on("click", function () {
    $(".showup").slideToggle("fast");
});

HTML是

<div class="click">click anywhere</div>
<div class="showup">something I want to show</div>

试试看..

Answer 5

由于使用的是jquery，因此可以使用.toggle（）实现此功能。

以下是一个示例示例...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Toggle </TITLE>
<style>
    .panel{
        background-color:blue;
    }   
    .open{
        background-color:red;
    }   

</style>
  <script src="js/jquery-1.11.1.min.js"></script>
    <script src="jquery-ui.js"></script>
    <script>
        function tgl(){
            $( ".panel" ).toggle();

        }
    </script>
 </HEAD>

 <BODY>
    <div class="panel">Panel Div</div>
        <div class="open" onclick=tgl()>Open Div. Click on Here to Toggle Panel Div</div>

 </BODY>
</HTML>

Answer 6

在脚本末尾添加

$(document).ready(function(){
$(".acc_expand-all").click(function(){
$(".acc_container").slideToggle("slow");
});
})

用您要单击的div替换.acc_expand-all
将.acc_container替换为您要切换的div

fiddleUpdate