Question

这就是我要做的事情： http://codepen.io/shewter/pen/pRKbJZ

它基本上有效，但我有两个问题：

我希望任何可见的div都能自动隐藏，如果点击了另一个。
我确信编写/压缩Javascript的方法比我在这里要好得多。想法？

＆＃13;

$(".slidingDiv.info1").hide();
$(".slidingDiv.info2").hide();
$(".slidingDiv.info3").hide();
$(".slidingDiv.info4").hide();
$(".slidingDiv.info5").hide();
$(".slidingDiv.info6").hide();
$(".slidingDiv.info7").hide();
$(".slidingDiv.info8").hide();

$(".show_hide.info1").show();
$(".show_hide.info2").show();
$(".show_hide.info3").show();
$(".show_hide.info4").show();
$(".show_hide.info5").show();
$(".show_hide.info6").show();
$(".show_hide.info7").show();
$(".show_hide.info8").show();

$('.show_hide.info1').click(function () {
$(".slidingDiv.info1").toggle("slide");
});

$('.show_hide.info2').click(function () {
$(".slidingDiv.info2").toggle("slide");
});

$('.show_hide.info3').click(function () {
$(".slidingDiv.info3").toggle("slide");
});

$('.show_hide.info4').click(function () {
$(".slidingDiv.info4").toggle("slide");
});

$('.show_hide.info5').click(function () {
$(".slidingDiv.info5").toggle("slide");
});

$('.show_hide.info6').click(function () {
$(".slidingDiv.info6").toggle("slide");
});

$('.show_hide.info7').click(function () {
$(".slidingDiv.info7").toggle("slide");
});

$('.show_hide.info8').click(function () {
$(".slidingDiv.info8").toggle("slide");
});

＆＃13;

.box {float: left; width: 25%; height: auto;}
	.slidingDiv {text-align: left; font: 14px/24px arial; color: #222; background-color: #fff; padding:20px; margin-top:10px; width: 33%; height:80%; position: absolute; z-index: 160; top: 20px; right: 20px; -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2); box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);}
	.show_hide {display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="show_hide info1"><img src="http://placehold.it/440x400/ffffff/000000?text=BOX+1" alt="" class="box"></a>
<a href="#" class="show_hide info2"><img src="http://placehold.it/440x400/eeeeee/000000?text=BOX+2" alt="" class="box"></a>
<a href="#" class="show_hide info3"><img src="http://placehold.it/440x400/dddddd/000000?text=BOX+3" alt="" class="box"></a>
<a href="#" class="show_hide info4"><img src="http://placehold.it/440x400/cccccc/000000?text=BOX+4" alt="" class="box"></a>
<a href="#" class="show_hide info5"><img src="http://placehold.it/440x400/aaaaaa/ffffff?text=BOX+5" alt="" class="box"></a>
<a href="#" class="show_hide info6"><img src="http://placehold.it/440x400/999999/ffffff?text=BOX+6" alt="" class="box"></a>
<a href="#" class="show_hide info7"><img src="http://placehold.it/440x400/666666/ffffff?text=BOX+7" alt="" class="box"></a>
<a href="#" class="show_hide info8"><img src="http://placehold.it/440x400/333333/ffffff?text=BOX+8" alt="" class="box"></a>

<div class="slidingDiv info1">
    <p>Info 1</p>
    <p><a href="#" class="show_hide info1">Close</a></p>
</div>
<div class="slidingDiv info2">
    <p>Info 2</p>
    <p><a href="#" class="show_hide info2">Close</a></p>
</div> 
<div class="slidingDiv info3">
    <p>Info 3</p>
    <p><a href="#" class="show_hide info3">Close</a></p>
</div> 
<div class="slidingDiv info4">
    <p>Info 4</p>
    <p><a href="#" class="show_hide info4">Close</a></p>
</div> 
<div class="slidingDiv info5">
    <p>Info 5</p>
    <p><a href="#" class="show_hide info5">Close</a></p>
</div> 
<div class="slidingDiv info6">
    <p>Info 6</p>
    <p><a href="#" class="show_hide info6">Close</a></p>
</div> 
<div class="slidingDiv info7">
    <p>Info 7</p>
    <p><a href="#" class="show_hide info7">Close</a></p>
</div> 
<div class="slidingDiv info8">
    <p>Info 8</p>
    <p><a href="#" class="show_hide info8">Close</a></p>
</div>

＆＃13;

Answer 1

您可以将代码简化为：

$(".slidingDiv").hide();
$(".show_hide").show()
               .click(toggleSlidingDiv);

function toggleSlidingDiv() {
    var infoclass = $(this).attr('class').match(/\binfo\d+\b/);
    $(".slidingDiv."+infoclass).toggle("slide")
                               .siblings(".slidingDiv")
                               .hide("slide");
}

Fixed Codepen

切换隐藏的div - 我的脚本有效，但必须有更好/更清洁的方式

1 个答案: