HTML, CSS3, JQuery, как создать по событию клика - PullRequest
Новая
       5

HTML, CSS3, JQuery, как создать по событию клика

0 голосов
/ 14 мая 2018

Я хочу сделать кнопку внутри автоматически сгенерированного блока, чтобы изменить переполнение с 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>

Надеюсь, мне достаточно ясно, что я хочу сделать.

Ответы [ 4 ]

0 голосов
/ 14 мая 2018

Я нашел решение:

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>
0 голосов
/ 14 мая 2018

Вы должны использовать .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>
0 голосов
/ 14 мая 2018

В вашем коде несколько проблем.

document.getElementsByClassName возвращает список элементов (массив AKA), поэтому ваш content.className неверен, когда вы получаете доступ к свойству className массива (которого нет) вместо свойства 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");
});

Соответствующая информация:

0 голосов
/ 14 мая 2018

<- language: lang-javascript -> 

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

<- ->

, поэтому каждый раз, когда вы нажимаете кнопку, он добавляет или удаляет класс show на ваших элементах с col-9 именами классов

...