Question

我有一个带有链接的页面，我希望每次用户点击它时 - 它会打开一个包含内容的div - 然后点击任意位置就会关闭它。

如何使用CSS执行此操作？或者我应该使用Javascript吗？怎么样？
是否更推荐使用JS来做到这一点？什么加载在网页上更快？

<a href="">A LINK</a>

<div id="popush"> 
    this is some text.
</div>


#popush{
   /*display:none; */
    border: 1px solid black;
    margin:0 auto;
    width: 200px;
    height:100px;
}

Answer 1

这通常通过JavaScript完成。也许jQuery UI Dialog是你可以使用的东西？

一般来说，你想做的是：

用内容准备div并通过CSS使其不可见（显示：无） - 或者改用css类。
将单击处理程序附加到href，并在处理程序内的div上执行（display：block）。

你的问题听起来很理论..你还需要一个代码示例吗？

编辑：恩，好吧..好像我误解了这个问题。我立刻想到了对话，而不是accordion。

Answer 2

我希望我能正确理解你的问题。

您可以使用jQuery来执行此操作。请参阅此示例Fiddle

HTML

<button class="btn1">Hide</button>
<button class="btn2">Show</button>

<div id="myDiv" ><p>This is a paragraph.</p></div>

JS

$(document).ready(function(){
  $(".btn1").click(function(){
  $("#myDiv").hide();
  });
  $(".btn2").click(function(){
  $("#myDiv").show();
  });
});

Answer 3

有许多错过了解。

我认为这里的人们比现在更复杂。这是一个小提琴： http://jsfiddle.net/TCHdevlp/dnaLqa0g/9/

这是我使用的jQuery代码：

            $(".link").click(function(e){
                e.preventDefault(); // prevent default link behaviour, or the browser will try to redirect you to an other page (that's what links do).
                $("#popush").show(function(){ //this function will only be created when the #popush shows, it's a callback.        
                    $(document).one("click",function(){  //I used $.one() I let you read the doc about this ;)
                        $('#popush').hide();
                    });
                });
            });

如何创建一个在屏幕上打开div的href？

3 个答案: