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

检查此fiddle

这是我使用的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");
});
})

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

fiddleUpdate

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

6 个答案:

检查此fiddle