javascript - 不需要的显示 : none added automatically on class

标签 javascript jquery html css panel

我有一个面板,里面有一个复制链接,当我点击打开我的面板时,会自动添加一个 display:none

为了解决我在我的 jquery 部分添加了这一行:showme.style.display = "none"; 现在我们可以完美地打开面板但是之后不可能关闭它

有人有解决方案吗?

here是我的链接 WITHOUT showme.style.display = "none";:


here是我的链接,这是我的代码 WITH showme.style.display = "none";:

<!DOCTYPE HTML><!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head><meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>

<style>

div#panel1 { 
    display: block; 
    background-color:#eee; 
    visibility: hidden;
}

.flip1  { 
    display: block; 
    background-color:#eee;
}

#check  { 
    visibility: hidden; 
    width:12px; height:12px;
}
span#copy-callbacks, span#copy-callbacks2 { 
    float: none; cursor:pointer; 
}
.zclip { 
    border:1px solid red; 
    position:relative; 
    display:inherit; 
}
div#zclip-ZeroClipboardMovie_1.zclip { 
    position: relative; 
    margin-top:-18px; 
}

</style>
<script type="text/javascript">
$(document).ready(function(){
    $("span#copy-callbacks").zclip({
        path:"ZeroClipboard.swf",
        copy:$('#callback-paragraph').text(),
        beforeCopy:function(){
            $('#copy-callbacks').css('display','none');
        },
        afterCopy:function(){
            $('#copy-callbacks').css('display','block');
        }
    });

    document.getElementById("copy-callbacks").onclick = function() {
        document.getElementById("check").style.visibility = "visible";
    }
});


$(document).ready(function() {
    $('span#copy-callbacks').hover(
        function () {
            $(this).css({"color":"#e0ccb4"});
        }, 

        function () {
            $(this).css({"color":"#000"});
        }
    );

    $(".flip1").click(function(){
    $("#panel1").slideToggle("fast");
    });
});

function newwindow() {
    var showme = document.getElementById("panel1");
    showme.style.visibility = "visible";
    showme.style.display = "none";
}
</script>
</head>
<body>

<div style="margin-top:150px;" onclick="newwindow()" class="flip1">Click to slide the first panel down or up</div>
<div style="display: block; padding-bottom:80px;" id="panel1">

<span id="copy-callbacks"> Copy link&nbsp;&nbsp;<img src="check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>

</div>

<script type="text/javascript" src="jquery.zclip.js"></script>
<script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>
</html>

最佳答案

  1. 你不需要 newwindow()
  2. 对于#panel1:在文档级样式中,移除可见性和显示。
  3. 对于#panel1:内联样式,显示:无

我说的是第一个链接。

关于javascript - 不需要的显示 : none added automatically on class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32390545/

相关文章:

javascript - 将函数分配给对象属性

javascript - 检测 "Missing Video"YouTube 图片

jquery - 在 jquery Autocomplete 中解析 JSON

javascript - 使用 jsPDF 从动态内容生成 PDF 时遇到问题

javascript - 图像比较 slider 容器不会 flex 包裹

jquery - 在 React 的 JSX 中初始化 jQuery 函数

javascript - 绑定(bind)多个事件

javascript - 为什么附加输入字段提交不起作用?

html - IE7 与 FF float 问题

css - 无法在另一个旁边延长 div