Question

我做了一个简单的切换按钮来隐藏和显示。我在Javascript / Jquery的编码技巧非常糟糕。

在桌面视图中，描述显示完全正常。（图片在Desktop view。），在移动设备中，有一个按钮可以切换隐藏并显示描述。（图片在Mobile View。）点。

但是，当我在移动视图中切换隐藏描述时，当我拖动浏览器时，它会在桌面视图中消失。只有当我在移动设备中切换显示时，它才有可能在桌面上显示。如何让它出现？

使用Javascript：

//Script
<script>
    $(document).ready(function () {
        $(".toogle-button").click(function () {
            $(".toggleholder").slideToggle("slow");
            $(this).find("i").toggleClass("fa-chevron-down");
        });
    });
</script>

HTML：

//html
<div class="toogle-button">Introduction<i class="pull-right fa fa-chevron-up fa-chevron-down"></i></div>
<div class="toggleholder">
    <div class="desc-holder">
        <p>
            <p><b>Subject:</b></p>
            <span class="side-text">Design</span>
        </p>
        <p>
            <p><b>Description:</b></p>
            <span class="side-text">This quiz is to test your knowledge on HTML basic foundation.</span>
        </p>
    </div>
    <div class="user-holder">
    <p><b>Assigned By:</b></p>
    <div class="profile-holder">
        <div class="avatar-holder">
            <img src="/include/images/default/avartar_32.png" class="avatar32" />
        </div>
        <div class="username">Admin Asriah Asadi</div>
        <div class="clearfix"></div>
    </div>
</div>

CSS /减：

.toogle-button {
display: none;
margin-top: 15px;
padding: 10px;
background-color: #055eac;
@media only screen and (max-width: @screen-xs-max) {
    display: block;
  }
}

Answer 1

我建议您使用事件处理程序window.resize，以及您在新规模上做了什么：

$(window).resize(function()
 {
   var desktop_mobile_breakpoint = 768; //or whatever else!! it should be you @screen-xs-max...
   //when you drag your window
   if ($(window).width() > desktop_mobile_breakpoint) $('.toggleholder').show(); //desktop: we show it
   else $('.toggleholder').hide(); //mobile: we hide it
});

我想在移动设备中关闭div后，我的div会在桌面显示

1 个答案: