[英]Element manipulation with CSS/jQuery
我正在做一些操作,大概是使用jQuery,这很像以前的问题: 使用Javascript隐藏和显示divID-打开新标题时隐藏
我已经解决了我的问题。 我正在研究一些药丸/标签,其中每个药丸分为三个部分,每个部分都包含“阅读更多”的可能性,这是显示/隐藏的地方。 我的jsfiddle在这里: https ://jsfiddle.net/jwb99gw1/6/
<div class="container">
<h2>Pills</h2>
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="" href="#a">Read more</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#b">Read more</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h3>Something else</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#c">Read more</a>
</div>
</div>
<div id="a">Lorem ipsum (A)</div>
<div id="b">Lorem ipsum (B)</div>
<div id="c">Lorem ipsum (C)</div>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
目前,我已经做出了一个完全基于CSS的解决方案,但是它不能处理UX。 单击后,我希望“阅读更多”切换到“隐藏文本”,当然,如果在该状态下单击,则隐藏文本。 理想情况下,切换药丸/标签也应隐藏元素。
与我一开始所链接的问题相比,我的问题有些不同。 这些元素没有被彼此包围,因此我认为“ this”关键字不起作用,至少不完全是上一个问题的处理方式。
您将如何解决此问题? 必须有比ID jQuery处理更智能的解决方法。
我将.display-box
添加到您的.container
。
的HTML
<div class="container display-box">
...
<a data-target="#a">Read more</a>
<a data-target="#b">Read more</a>
<a data-target="#c">Read more</a>
...
<div id="a" class="box">Lorem ipsum (A)</div>
<div id="b" class="box">Lorem ipsum (B)</div>
<div id="c" class="box">Lorem ipsum (C)</div>
...
</div>
jQuery查询
$(".display-box").each(function () {
var $this = $(this);
$this.find("[data-target]").each(function () {
$(this).click(function () {
$($this.data("visible")).hide();
$("[data-target='"+$this.data("visible")+"']").text("Read more");
if ($this.data("visible") !== $(this).data("target")) {
$this.data("visible", $(this).data("target"));
$(this).text("Hide text");
$($this.data("visible")).show();
} else {
$this.data("visible", "")
}
});
});
})
的CSS
.box {
display:none;
}
jsfiddle: https ://jsfiddle.net/jwb99gw1/11/
基本上,此操作会为每个.displaybox
迭代,并找到每个具有属性data-target
元素,然后为每个元素添加一个click事件监听器。
它隐藏了对.display-box
data-visible
的数据中指定的元素,但此数据对检查器而言是隐藏的。 然后,它从单击的链接中获取data-target
的值,并将其存储回data-visible
。 然后,它显示在data-visible
指定的元素,该元素是单击链接的目标。
由于您没有引用clicked元素的类,因此我们将不得不使用某种父关系。 当我们无法控制正在生成的DOM时 ,以下方法可能会非常有用 ,因此可以按以下步骤完成...
hideall = function(){
jQuery("#home p ").next("a").each(function(e){ // accessing all the pairs of readmore elements and their respective companion elements
readmore2 = jQuery(this).attr('href'); // get the readmoreid
id2 = readmore2.substr(1); // extract the id
jQuery("#"+id2).hide();
});
}
jQuery("#home p ").next("a").on("click", function(e){
e.preventDefault; // prevent the <a> tag from navigating
readmore = jQuery(this).attr('href'); // get the readmoreid
id = readmore.substr(1); // extract the id
hideall();
jQuery("#"+id).show();
});
jQuery(document).on( 'shown.bs.tab', function (e) {
hideall();
});
即使此解决方案有效,但这也不是正确的方法,我建议您使用类来编写更高效,更好的代码。
哇,我的答案还很晚,但是我已经做好了工作,所以无论如何我都会发布。
$(function(){
$(".a").click(function () {
$(".p").toggle();
$(this).text(function(i, text){
return text === "Read more" ? "Hide text" : "Read more";
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.