HTML，CSS3，jQuery如何创建Click事件

Question

我想在自动生成的块中创建一个按钮，以将溢出从hidden更改为auto 。

我在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;
}

现在，无论哪一个，我都可以在其中一个块中包含HTML格式的长文本。 col-9其中的一部分被隐藏，因为我使用了overflow:hidden; 。

我想做的是创建一个按钮，然后单击以更改为overflow:hidden; overflow: auto; 。

我的问题是如何执行此操作，在单击时从hidden更改为auto ，在再次单击时再次返回到以前的状态。

我尝试过这样的事情，但这不好：

少->

[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->

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->

<div class="col-9">
    <a id="button-show">Read</a>
    <script src="js/read.js"></script>
    <p> some long text ........ </p>
 </div>

我希望我很清楚我想做什么。

Answer 1

<-语言：lang-javascript->

$("#button-show").click(function(){
    $(".col-9").toggleClass("show")
})

<-->

因此，每当您单击该按钮时，它将添加或删除带有col-9类名的元素上show类

Answer 2

您应该使用.toggle（）在显示和隐藏之间切换内容。 这是一个例子

 <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> 

Answer 3

您的代码中有多个问题。

document.getElementsByClassName返回元素列表（AKA数组），因此当您访问数组的className属性（不存在）而不是数组中每个元素的className属性时， content.className是错误的。 您必须迭代数组并分别访问每个元素。 另外，您不是按类访问，而是按选择器访问（没有类[class*='col-'] ，但是类col-1 ， col-2等）。 要使用选择器进行选择，您必须使用querySelector （选择一个元素）或querySelectorAll （选择所有元素）。

另外，要隐藏元素，您不必更改overflow 。 overflow用于滚动条。 您必须将display属性更改为display: none ，并且由于show类不是子元素，因此需要一个&字符：

[class*='col-'] {
  text-align: center;
  [...CSS THINGYS...]
  position: relative;
  &.show { // Note the & before the dot
    display: none;
  }
}

您的代码实际上没有任何jQuery。 是普通的JS。

另外，将事件附加到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";
    }
});

如果您希望以更多的jQuery方式使用它，则可以执行上述操作，与上面的方法相同，但方法更短：

$("#show").on("click", function() {
    if ($("[class*='col-']").hasClass("show")) {
        $("#show").html("Read");
    } else {
        $("#show").html("Close");
    }
    $("[class*='col-']").toggleClass("show");
});

相关信息：

• addEventListener
• getelementsbyclassname
• querySelector
• querySelectorAll
• 更少的“＆”运算符
• jQuery hasClass
• jQuery toggleClass

Answer 4

我找到了解决方案：

JQ：

$(document).ready(function(){
 $("button").click(function(){
  $("p3").toggle();
 });
});

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：

<div class="col-9">
<button>Read</button>
<h1>TITLE</h1>
<p>some tekst.</p>
<p3>Tekst i want to hide ....</p3>
</div>