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>