显示隐藏可用内容

Question

我的帖子中有一些内容。但我想隐藏它，直到我点击这篇文章中的链接。我还没有建立这个网站，但我会说出我的想法。

1. 第一个标题
2. 第二个标题
3. 第三个标题
4. 第四个标题

/* 以下内容是隐藏的，直到我点击上面的链接。 / / 内容可用 div 标签包裹，不要从其他网站加载。 */

1. 内容 1 将仅显示点击“1.第一个标题”
2. 内容 2 将仅显示点击“2.第二个标题”
3. 只有点击“3.第三个标题”才会显示内容3
4. 内容 4 将仅显示点击“4.第四个标题”

可以使用 CSS 或 Ajax / jQuery 来创建效果吗？

Answer 1

您可以使用以下 jquery 代码来实现：

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});

这里是complete demo 如何通过点击事件隐藏和显示元素。

Answer 2

我制作了一个纯 css 手风琴，它实现了相同的功能。在codepen查看以下链接

HTML：

<div class="container">
  <ul>
    <li><a href="#first" class="acc-header">What is java Programming Language?</a>
  <div class="acc-content" id="first">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae.
    </p>
  </div></li>
    <li><a href="#second" class="acc-header">How is javascript different from java?</a>
  <div class="acc-content" id="second">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
    </p>
  </div></li>
    <li><a href="#third" class="acc-header">Other front end technologies</a>
  <div class="acc-content" id="third">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum vel aliquid. Quaerat soluta sed aperiam temporibus ipsum obcaecati porro commodi error unde reprehenderit ipsa, dolore id, totam dolores, quae
    </p>
  </div></li>
  </ul>
</div>

CSS：

*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
padding-top: 50px;
font : 1em cursive;
background-image: url(http://www.mrwallpaper.com/wallpapers/fantasy-winter-scenery-1920x1200.jpg);
background-size: cover;
color: #fff;
overflow-x: hidden;
}
.container{
position: relative;
width: 100%;
max-width: 500px;
margin: auto;
padding: 5px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.acc-header{
display: block;
cursor: pointer;
padding: 10px 20px;
background-color: #000;
opacity: 0.7;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #fff;
border-radius: 2px;
margin-bottom: 10px 0 0 10px;
}
.acc-content p{
margin: 10px;
}
.acc-content{
background-color: #222;
opacity: 0.7;
height: 0px;
overflow: hidden;
-webkit-transition: height 0.4s ease;
-moz-transition: height 0.4s ease;
-ms-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;
}
.acc-content:target{
height: 170px;
}

Answer 3

使用 jQuery 可以很简单。默认情况下，您使用 CSS 隐藏 .content div，并在标题点击时显示相应的。考虑下面的例子。

var $content = $('.content');
$('h2').click(function() {
    $content.removeClass('show')
            .filter('.content-' + $(this).data('content'))
            .addClass('show');
});

.content {
    display: none;
    padding: 5px;
    background: #EEE;
}
.content.show {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 data-content="1">Heading #1</h2>
<h2 data-content="2">Heading #2</h2>
<h2 data-content="3">Heading #3</h2>

<div class="content content-1">Content #1</div>
<div class="content content-2">Content #2</div>
<div class="content content-3">Content #3</div>

Answer 4

如果我理解得很好，我建议在第一次单击时从 ajax 加载内容，然后将其隐藏，而不是删除切换的面板并每次从 AJAX 再次检索它（这样每次单击时都无需等待，并且更少请求）。

所以这里有一个方法：

$('.header').click(function()
{
    var clickedHeader= $(this);
    if (clickedHeader.next().is('.toggle:visible'))
    {
        clickedHeader.next().slideDown(800);
    }
    else if (clickedHeader.next().is('.toggle:hidden'))
    {
        clickedHeader.next().slideUp(800);
    }
    else
    {
        $.get(url, data, function(data)
        {
            // First do some treatment if needed...
            clickedHeader.after('<div class="toggle" style="display:none;">'+data+'</div>');
            clickedHeader.next().slideDown(800);
        });
    }
});

如果你有这样的 HTML，这将起作用。

<div class="header">First header</div>
<div class="header">Second header</div>
<div class="header">Third header</div>
<div class="header">Fourth header</div>

在每个标题之后，您将切换一个具有“.toggle”类的 div。

希望对你有帮助。