HTML CODE

Question

请帮助我顺利打开div。我已经添加了脚本和HTML代码，它工作得很好但是却突然用暴力打开了。我想打开我的div＆＃34;＃mapsec＆＃34;顺利进行。

function showhide() {
    var div = document.getElementById("mapsec");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";

    }
}

HTML CODE

<h3>Visit us (<i><a onclick="showhide()" id="scrollmap" class="mapimg" style="cursor: pointer;">Map</a></i>)</h3>

<div id="mapsec" style="display: none; clear: both;">
    <img
        src="http://www.websitesnmore.com.au/wp-content/uploads/2013/06/map-img.jpg"
        alt="map-img" width="1245" height="350"
        class="alignnone size-full wp-image-4586" />
</div>

Answer 1

你有几种方法可以用jQuery做到这一点。例如：

function showhide() {

    $('#mapsec').slideToggle(200);
}

这将打开或关闭div。 200是以毫秒为单位的动画速度。

检查这些：

$('#mapsec').toggle(200); - jQuery.toggle()
$('#mapsec').slideToggle(200); - jQuery.slideToggle()
$('#mapsec').fadeToggle(200); - jQuery.fadeToggle()

Answer 2

使用display完全符合它的说法：display或hide元素。您可以使用jQuerys hide和show函数，但由于您尝试使用标准javascript，我会向您提供另一种解决方案：

<div id="mapsec">
<!-- Your Contents -->
</div>

现在你的CSS：

#mapsec { 
    max-height: 0; 
    overflow: hidden; 
    /* You should prefix the following: */
    transition: max-height 500ms;
}
#mapsec.active {
    /* Depending on this value, your animatiom will seem faster or shorter */
    max-height: 1000px;
}

现在javascript：

function showhide(){
    var div = document.getElementById("mapsec");
    if (div.className === "") {
        div.className = "active";
    } else {
        div.className = "";
    }
}

我们正在使用的是CSS3的内置动画，以触发看起来更平滑的内容。我们隐藏您要设置动画的框的overflow - 因为您希望它不可见。然后我们还将max-height设置为0，因此它似乎没有height（我想添加任何padding和margin s不包括在这里，也可能需要重置。）

现在我们简单地将active类添加到div中以对其进行动画处理。

这是一个改进的，更通用的，可重复使用的CSS和javascript版本：

<div id="mapsec" class="hidden">
<!-- Your Contents -->
</div>

.hidden { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 500ms;
}
.hidden.active {
    max-height: 1000px;
}

function showhide(id){
    var div = document.getElementById(id);
    if (div.className === "hidden") {
        div.className = "hidden  active";
    } else {
        div.className = "hidden";
    }
}

现在，您可以将hidden添加到任意框中，然后通过执行<a href="#" onclick="showHide('id'); return false;">Unhide</a>（将'id'替换为您要显示的元素的id取消隐藏）。

如果你想使用jQuery，我们可以使用内置的jQuery内容让它更好更容易（和robuster）：

<a href="#" onclick="$('#mapsec').toggleClass('active'); return false;">Unhide</a>

现在toggleClass会添加active类并自行删除它！这是更好的，因为当你使用多个类时，jQuery将保持原样（注意我们实际上不再需要在此代码中使用hidden了？只要它已经有hidden，我们就可以了别管它了。）

function showhide(id){
    var div = document.getElementById(id);
    if (div.className === "hidden") {
        div.className = "hidden  active";
    } else {
        div.className = "hidden";
    }
}

.hidden { 
    max-height: 0; 
    overflow: hidden; 
    /* You should prefix the following: */
    transition: max-height 500ms;
}
.hidden.active {
    max-height: 1000px;
}

<div id="mapsec" class="hidden">
   <img src="" width="200" height="200" />
</div>
<a href="javascript:showhide('mapsec')">ShowHide</a>

Answer 3

$( "#mapsec" ).show( "slow" );

这应该很好地缓解div而不是：

div.style.display = "block";

Answer 4

使用jQuery.toggle()：

function showhide() {
    $('#mapsec').toggle();
}

Answer 5

我主要同意somethinghere，但是因为你用内部图像设置div的动画，所以我会设置div的高度并将图像高度设置为100％。认为看起来更好/更顺畅Fiddle。 JS更改类来自the answer，但CSS是：

#mapsec {
    height: 0;
    overflow: hidden;
    -webkit-transition: height 500ms;
    transition: height 500ms;
}
#mapsec.active {
    height: 200px;
}
#mapsec img {
    height: 100%;
    width: 100%;
}

如何顺利打开div

HTML CODE

5 个答案: