Question

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

第一个标题

第二个标题

第三个标题

第四次标题

/ *以下内容隐藏在我点击上面的链接之前。 /   / 内容可以包含在div标签中，不要从其他站点加载。 * /


仅显示内容1，点击＆＃34; 1。第一个标题＆＃34;

仅显示内容2，点击＆＃34; 2。第二个标题＆＃34;

仅显示内容3，点击＆＃34; 3。第三个标题＆＃34;

仅显示内容4，点击＆＃34; 4。第四个标题＆＃34;

可以使用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并在标题单击上显示相应的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。

希望它有所帮助。

显示隐藏可用内容

4 个答案: