Question

我无法隐藏和显示p标签。有人可以帮我这个代码。我是什么试图完成的是，当您单击隐藏按钮时，内容将被隐藏。然后，当您准备好显示内容时，单击“显示”按钮。我知道你可以使用切换但我不想这样做

<!DOCTYPE html>    <!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
  $("button").click(function(value){
    if (value==="hide"){
        $("p").hide();}
    else 
          $("p").show();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
  $("button").click(function(value){
    if (value==="hide"){
        $("p").hide();}
    else 
          $("p").show();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>

Answer 1

目前它不适用于多个内容。

这是因为您的网页上有重复的ID。要解决这个问题，请使用类，然后从单击的锚点中定位下一个.slickbox div：

$('a.slick-toggle').click(function() { 
    $(this).next("div").find(".slickbox").toggle(400);
    return false;
});

..并将ID更改为类，例如：

<a class="slick-toggle" href="#">Toggle the box</a>
<div style="position:relative; outline: 1px dashed orange; padding:100px;">
    <div class="slickbox" style=" outline: 1px dashed hotpink; background-color:#ccc;position:absolute; top:100px; left: 20px;">
        <h2> music nsme</h2>
        <p>This is the box that will be shown and hidden and togg </p>
    </div>
</div>

使用jquery显示/隐藏

1 个答案: