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，单击并再次返回到新单击时的上一个状态。

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

更少 - ＆gt;

[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 - ＆gt;

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 - ＆gt;

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

我希望我足够清楚，我想做什么。

Answer 1

＆lt; - language：lang-javascript - ＆gt;

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

＆lt; - - ＆gt;

因此，每当您点击该按钮时，它都会使用show类名

在您的元素上添加或删除类col-9

Answer 2

您应该使用.toggle()在show和hide之间切换内容。这是一个例子

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

$(document).ready(function(){
    $("#button-show").click(function(){
        $("#show").toggle();
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您的代码中存在多个问题。

Item: id int PRIMARY KEY, name string, foreign_id FOREIGN KEY返回一个元素列表（AKA数组），因此当您访问数组document.getElementsByClassName属性（不存在）时，content.className错误，而不是className 1}}数组内每个元素的属性。您必须迭代数组并单独访问每个元素。此外，您不是按类访问，而是通过选择器访问（没有类className，但类[class*='col-']，col-1等...）。要选择选择器，您必须使用选择一个元素的col-2或选择所有元素的querySelector。

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

您的代码实际上没有任何jQuery。是简单的JS。

此外，将事件附加到HTML元素的最佳方法是[class*='col-'] { text-align: center; [...CSS THINGYS...] position: relative; &.show { // Note the & before the dot display: none; } }，所以：

addEventListener

如果你想以更jQuery的方式使用它，你可以这样做，这与上面的相同，但更短：

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";
    }
});

相关信息：

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>

Html，css3，jquery如何在click事件上创建

4 个答案: