我有一个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;
}

最佳答案

您可以这样使用.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>

关于javascript - 如何使用外部div切换另一个Div onClick的展开和缩小?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26389338/

10-12 12:32
查看更多