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