我有一个包含2列多个div的页面。它们基本上是描述,用户可以单击“阅读更多”按钮来展开描述。然后会出现“长”类。当用户点击另一个Read More div时,我希望当前的div关闭,而新的div要扩展。但是,当我点击一个按钮时,我的jQuery有点关闭,所有div打开,当我再次点击所有div关闭时。
第三个功能是我需要重写的功能,这样我打开第一个div,只有一个打开,当我打开第二个div时,第一个关闭。任何帮助表示赞赏谢谢。
以下是HTML的摘录。
HTML
<section id="tom-box">
<img class="image" src="img/tom.png" align="left">
<h3>Person</h3>
<h2>Description</h2>
<article class="short">Lorem ipsum. This part automatically shows.</article>
<div class="long">This part is hidden until clicked on Read More button.
</div>
<a id="tom-button" class="button" href="javascript:;">
<img src="img/more-arrow.png">Read More
<img src="img/more-arrow.png">
</a>
</section>
<section id="bob-box">
<img class="image" src="img/bob.png" align="left">
<h3>Person</h3>
<h2>Description</h2>
<article class="short">Lorem ipsum. This part automatically shows.</article>
<div class="long">This part is hidden until clicked on Read More button.
</div>
<a id="bob-button" class="button" href="javascript:;">
<img src="images/more-arrow.png">Read More
<img src="images/more-arrow.png">
</a>
</section>
的jQuery
$(document).ready( function () {
function hidesections() {
$("*[id*='-box'] .long").hide('medium');
};
function reset() {
$("*[id*='-button']").html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
};
$("*[id*='-read']").toggle(
function() {
$("*[id*='-box] .long").show('medium');
reset();
$("*[id*='-button']").html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
}, function () {
if ( $("*[id*='-box'] .long").css('display') == 'block')
{
hidesections();
reset();
}
else {
hidesections();
reset();
$("*[id*='-box'] .long").show('medium');
$("*[id*='-button']").html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
}
});
})
答案 0 :(得分:1)
我相信这是您想要的实施:http://jsfiddle.net/swm53ran/53/
HTML:
<section id="tom-box">
<img class="image" src="img/tom.png" align="left"/>
<h3>Person</h3>
<h2>Description</h2>
<article class="short">Lorem ipsum. This part automatically shows.</article>
<div class="long">This part is hidden until clicked on Read More button.
</div>
<a class="button more" href="#">
<img src="img/more-arrow.png"/> Read More <img src="img/more-arrow.png"/>
</a>
<a class="button less" href="#">
<img src="images/less-arrow.png"/> Read Less <img src="images/less-arrow.png"/>
</a>
</section>
JS:
$(document).ready( function () {
$('.more').on('click', function() {
console.log('more clicked');
$('.long').hide();
$('.more').show();
$('.less').hide();
$(this).closest('section').find('.long').show();
$(this).closest('section').find('.more').hide();
$(this).closest('section').find('.less').show();
});
$('.less').on('click', function() {
console.log('less clicked');
$(this).closest('section').find('.long').hide();
$(this).closest('section').find('.more').show();
$(this).closest('section').find('.less').hide();
});
});
的CSS:
.long {
display:none;
}
.less {
display:none;
}
首先,就像其他人一样,你不能在页面上多次拥有相同的id,因此第一个改变就是改变id =&#34; image&#34;和id =&#34;短&#34; to class =&#34; image&#34;和class =&#34; short&#34;。
我添加的css只是为了确保没有长的div显示在开头。
已编辑以在答案中捕获整个问题范围(阅读较少的功能) 希望这有帮助
当点击更多类时,它会隐藏所有类长div和更少按钮,然后显示当前长div和更少按钮并隐藏自己的show more按钮。
另外,我添加了less按钮而不是通过jquery添加它。在按钮点击较少的情况下,它会隐藏自己较少的按钮及其长div并显示其更多按钮。
注意加载较少类的css,以便在加载页面时隐藏所有较少的按钮。
答案 1 :(得分:1)
这里有一个更简单的答案。基本的想法是你切换容器上的show-more
类,然后你的css可以根据需要打开和关闭按钮和文本。
此外,如果你想要动画(滑出或其他),你可以轻松地将它们附加到css中的.show-more
类内容。
$(document).ready( function () {
$('.more, .less').on('click', function(ev) {
ev.preventDefault();
var currentSection = $(this).closest('section');
$('section').not(currentSection).removeClass('show-more');
$(this).closest('section').toggleClass('show-more')
});
});
&#13;
.long {
display:none;
}
.show-more .long {
display:block;
}
.button.less {
display: none;
}
.show-more .button.more {
display:none;
}
.show-more .button.less {
display:block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="tom-box">
<img class="image" src="img/tom.png" align="left"/>
<h3>Person</h3>
<h2>Description</h2>
<article class="short">Lorem ipsum. This part automatically shows.</article>
<div class="long">This part is hidden until clicked on Read More button.
</div>
<a class="button more" href="#">
<img src="img/more-arrow.png"/> Read More <img src="img/more-arrow.png"/>
</a>
<a class="button less" href="#">
<img src="images/less-arrow.png"/> Read Less <img src="images/less-arrow.png"/>
</a>
</section>
<section id="bob-box">
<img class="image" src="img/bob.png" align="left"/>
<h3>Person</h3>
<h2>Description</h2>
<article class="short">Lorem ipsum. This part automatically shows.</article>
<div class="long">This part is hidden until clicked on Read More button.
</div>
<a class="button more" href="#">
<img src="img/more-arrow.png"/> Read More <img src="img/more-arrow.png"/>
</a>
<a class="button less" href="#">
<img src="images/less-arrow.png"/> Read Less <img src="images/less-arrow.png"/>
</a>
</section>
&#13;