[英]Html,css3, jquery how to create on click event
I want to make a button inside auto generated block to change overflow from hidden
to auto
. 我想在自动生成的块中创建一个按钮,以将溢出从
hidden
更改为auto
。
I created recursive responsive auto-grid in Less, css like this: 我在Less,css中创建了递归响应自动网格,如下所示:
.container {
.container-fixed();
[class*='col-'] {
float: right;
width: 100%;
}
.make-grid(@container-xs);
.make-grid(@container-sm);
.make-grid(@container-md);
.make-grid(@container-lg);
}
.container-fixed(@gap: @grid-gap-width) {
margin-right: auto;
margin-left: auto;
padding-left: (@gap / 2);
padding-right: (@gap / 2);
}
.generate-columns(@container-width;
@number-cols;
@i: 1) when (@i =< @number-cols) {
.col-@{i} {
@single-width: @container-width / @number-cols - 0.5;
width: @i * @single-width; // 800px
}
.generate-columns(@container-width;
@number-cols;
@i + 1);
}
.make-grid(@container-width) {
@media(min-width: @container-width) {
width: @container-width;
.generate-columns(@container-width, @grid-c);
}
}
[class*='col-'] {
text-align: center;
overflow: hidden;
height: 250px;
background: @color-h;
display: block;
margin: 1px;
color: @color-text;
position: relative;
}
And now I have long text in HTML inside one of blocks no matter which one, eg. 现在,无论哪一个,我都可以在其中一个块中包含HTML格式的长文本。 col-9 where is part hidden because I used
overflow:hidden;
col-9其中的一部分被隐藏,因为我使用了
overflow:hidden;
. 。
What I would like to do is to create a button and on click to change from overflow:hidden;
我想做的是创建一个按钮,然后单击以更改为
overflow:hidden;
to overflow: auto;
overflow: auto;
. 。
My question is how to do that, to change from hidden
to auto
, on click and again to return back to previous state on new click. 我的问题是如何执行此操作,在单击时从
hidden
更改为auto
,在再次单击时再次返回到以前的状态。
I tried something like this but that is not good: 我尝试过这样的事情,但这不好:
Less - > 少->
[class*='col-'] {
text-align: center;
overflow: hidden;
height: 250px;
background: @color-h;
display: block;
margin: 1px;
color: @color-text;
position: relative;
.show {
overflow: auto;
}
}
JS - > JS->
var content = document.getElementsByClassName("[class*='col-']");
var button = document.getElementbyID("show");
button.onclick = function() {
if (content.className == "show") {
content.className= "";
button.inerHTML = "Read";
} else {
content.className="show";
button.inerHTML = "Close";
}
};
html - > html->
<div class="col-9">
<a id="button-show">Read</a>
<script src="js/read.js"></script>
<p> some long text ........ </p>
</div>
I hope I am clear enough, what I want to do. 我希望我很清楚我想做什么。
<-- language: lang-javascript --> <-语言:lang-javascript->
$("#button-show").click(function(){
$(".col-9").toggleClass("show")
})
<-- --> <-->
so whenever you click the button, it will add or remove the class show
on your elements with the col-9
classnames 因此,每当您单击该按钮时,它将添加或删除带有
col-9
类名的元素上show
类
You should use .toggle() to toggle the contents between show and hide. 您应该使用.toggle()在显示和隐藏之间切换内容。 Here is an example
这是一个例子
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function(){ $("#button-show").click(function(){ $("#show").toggle(); }); });
[class*='col-'] { text-align: center; overflow: hidden; height: 250px; background: @color-h; display: block; margin: 1px; color: @color-text; position: relative; } #show { overflow: auto; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-9"> <a id="button-show">Read</a> <p id="show"> some long text ........ </p> </div>
You have multiple problems in your code. 您的代码中有多个问题。
document.getElementsByClassName
returns a list of elements (AKA array), so your content.className
is wrong as you accesing the array className
property (which is non-existant) instead of the className
property of each element inside the array. document.getElementsByClassName
返回元素列表(AKA数组),因此当您访问数组的className
属性(不存在)而不是数组中每个元素的className
属性时, content.className
是错误的。 You have to iterate the array and access each element individually. 您必须迭代数组并分别访问每个元素。 Also, you are not accesing by class, but by selector (There's no class
[class*='col-']
, but class col-1
, col-2
, etc...). 另外,您不是按类访问,而是按选择器访问(没有类
[class*='col-']
,但是类col-1
, col-2
等)。 To select with selectors you have to use querySelector
, which selects one element, or querySelectorAll
which selects all elements. 要使用选择器进行选择,您必须使用
querySelector
(选择一个元素)或querySelectorAll
(选择所有元素)。
Also, to hide an element you don't have to change overflow
. 另外,要隐藏元素,您不必更改
overflow
。 overflow
is for scrollbars. overflow
用于滚动条。 You have to change the display property to display: none
and also as the class show
is not a child element, it needs an &
character: 您必须将display属性更改为
display: none
,并且由于show
类不是子元素,因此需要一个&
字符:
[class*='col-'] {
text-align: center;
[...CSS THINGYS...]
position: relative;
&.show { // Note the & before the dot
display: none;
}
}
Your code don't has any jQuery actually. 您的代码实际上没有任何jQuery。 Is plain JS.
是普通的JS。
Also, the best way to attach events to HTML elements is via addEventListener
, so: 另外,将事件附加到HTML元素的最佳方法是通过
addEventListener
,因此:
var content = document.querySelectorAll("[class*='col-']");
var button = document.getElementbyID("show");
button.addEventListener("click", function() {
var anyShown = false;
content.forEach(function(element) {
if (element.className == "show") {
anyShown = true;
element.className= "";
} else {
element.className="show";
}
});
if (anyShown) {
button.inerHTML = "Read";
} else {
button.inerHTML = "Close";
}
});
If you want it in a more jQuery way you can do this, which do the same as above, but way shorter: 如果您希望以更多的jQuery方式使用它,则可以执行上述操作,与上面的方法相同,但方法更短:
$("#show").on("click", function() {
if ($("[class*='col-']").hasClass("show")) {
$("#show").html("Read");
} else {
$("#show").html("Close");
}
$("[class*='col-']").toggleClass("show");
});
Relevant info: 相关信息:
I found solution: 我找到了解决方案:
JQ: JQ:
$(document).ready(function(){
$("button").click(function(){
$("p3").toggle();
});
});
CSS: CSS:
[class*='col-'] {
text-align: center;
overflow:auto;
height: 250px;
background: @color-h;
margin: 1px;
color: @color-text;
position: relative;
.border-radius(10px);
p3 {
margin: 10px ;
padding: 5px;
width: 95%;
text-align: justify;
display: none;
}
}
HTML: HTML:
<div class="col-9">
<button>Read</button>
<h1>TITLE</h1>
<p>some tekst.</p>
<p3>Tekst i want to hide ....</p3>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.