javascript - 使用 jquery 隐藏和显示覆盖模态

标签 javascript jquery html css

我想为我的帖子内容做一个覆盖,比如“全屏模式对话框”。我一直坚持隐藏和显示我的内容和元素。我希望在显示内容时,元素将变得不可见。

http://jsfiddle.net/vjdwLzx8/

$(function(){
    $('.item').on('click',function(){
        $(this).next('.content').css('display','block');
    });


});

我也试过

 var item= $(this).next('.content').detach();
$('body').html('').append(item.css('display','block'); 

但我必须重新加载页面才能返回到商品页面,这很糟糕。

最佳答案

使用

DEMO FIDDLE

 $('.item').on('click',function(){
      $('.content').hide(); // hide 
        $(this).next('.content').show(); // show
    });

有动画

DEMO FIDDLE(Animation)

 $('.item').on('click', function () {
    $('.content').hide("slow", function () {
        // Animation complete.
    }); // hide 
    $(this).next('.content').show("slow", function () {
        // Animation complete.
    }); // show
});

关于javascript - 使用 jquery 隐藏和显示覆盖模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27701695/

相关文章:

JavaScript:设置 cookie 不起作用

javascript - 使用 img onclick 更改显示属性以阻止

javascript - 根据本地存储中的值更改类属性

javascript - Javascript:如何检查一个数组是否恰好包含另一个数组?

jquery 限制段落中的行数并在末尾应用三个句点

javascript - 在检索到最后一条记录后从 postgresql 中提取记录

javascript - 如何自动单击 href 以选择内容

javascript - 使用 AJAX 在(无限)滚动上加载更多 WordPress 帖子

html - Vuejs v-for 在更新 vuex 对象时重新构建

Jquery 切换动画宽度。