Treeview развернуть / свернуть перестает работать после установки флажка - PullRequest
Новая
       5

Treeview развернуть / свернуть перестает работать после установки флажка

1 голос
/ 29 мая 2019

У меня есть некоторый код для отображения дерева, созданного со списком <ul>, и мне нужны 2 кнопки для раскрытия и свертывания всех элементов дерева. Эта кнопка работает правильно но у меня возникают проблемы, когда я нажимаю на флажок в моем теге <li>. После этого 2 кнопки не работают

Если вы проверите код результата и нажмете кнопку «Развернуть и свернуть», вы обнаружите мою проблему.

Сначала эта кнопка работает очень хорошо, но когда мы нажимаем на флажок, кнопки не работают вообще. 

$(function() {
  $("#tree-collapse-all").click(function() {
    $(".tree input").removeAttr("checked");
  });

  $("#tree-expand-all").click(function() {
    $(".tree input").attr("checked", "checked");
  });
});
ol,
ul {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
}

body {
  margin: 30px;
  font-family: sans-serif;
}

#fontSizeWrapper {
  font-size: 16px;
}

#fontSize {
  width: 100px;
  font-size: 1em;
}


/* ————————————————————–
  Tree core styles
*/

.tree {
  margin: 1em;
}

.tree input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.tree input~ul {
  display: none;
}

.tree input:checked~ul {
  display: block;
}


/* ————————————————————–
  Tree rows
*/

.tree li {
  line-height: 1.2;
  position: relative;
  padding: 0 0 1em 1em;
}

.tree ul li {
  padding: 1em 0 0 1em;
}

.tree>li:last-child {
  padding-bottom: 0;
}


/* ————————————————————–
  Tree labels
*/

.tree_label {
  position: relative;
  display: inline-block;
  background: #fff;
}

label.tree_label {
  cursor: pointer;
}

label.tree_label:hover {
  color: #666;
}


/* ————————————————————–
  Tree expanded icon
*/

label.tree_label:before {
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 1em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  content: '+';
  text-align: center;
  line-height: .9em;
}

:checked~label.tree_label:before {
  content: '–';
}


/* ————————————————————–
  Tree branches
*/

.tree li:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.5em;
  display: block;
  width: 0;
  border-left: 1px solid rgb(7, 240, 112);
  content: "";
}

.tree_label:after {
  position: absolute;
  top: 0;
  left: -1.5em;
  display: block;
  height: 0.5em;
  width: 1em;
  border-bottom: 1px solid rgb(79, 7, 247);
  border-left: 1px solid rgb(240, 6, 6);
  border-radius: 0 0 0 .3em;
  content: '';
}

label.tree_label:after {
  border-bottom: 0;
}

:checked~label.tree_label:after {
  border-radius: 0 .3em 0 0;
  border-top: 1px solid rgb(79, 7, 247);
  border-right: 1px solid rgb(240, 6, 6);
  border-bottom: 0;
  border-left: 0;
  bottom: 0;
  top: 0.5em;
  height: auto;
}

.tree li:last-child:before {
  height: 1em;
  bottom: auto;
}

.tree>li:last-child:before {
  display: none;
}

.tree_custom {
  display: block;
  background: #eee;
  padding: 1em;
  border-radius: 0.3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a href="#" id="tree-expand-all">Expand all</a> | <a href="#" id="tree-collapse-all">Collapse all</a></p>

<br /><br />
<div id="fontSizeWrapper">
  <label for="fontSize">Font size</label>
  <input type="range" value="1" id="fontSize" step="0.5" min="0.5" max="5" />
</div>
<ul class="tree">
  <li>
    <input type="checkbox" id="c1" />
    <label class="tree_label" for="c1">Level 0</label>
    <ul>
      <li>
        <input type="checkbox" id="c2" />
        <label for="c2" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li><span class="tree_label">Level 2</span></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="c3" />
        <label for="c3" class="tree_label">Looong level 1 <br />label text <br />with line-breaks</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li>
            <input type="checkbox" id="c4" />
            <label for="c4" class="tree_label"><span class="tree_custom">Specified tree item view</span></label>
            <ul>
              <li><span class="tree_label">Level 3</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="c5" />
    <label class="tree_label" for="c5">Level 0</label>
    <ul>
      <li>
        <input type="checkbox" id="c6" />
        <label for="c6" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="c7" />
        <label for="c7" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li>
            <input type="checkbox" id="c8" />
            <label for="c8" class="tree_label">Level 2</label>
            <ul>
              <li><span class="tree_label">Level 3</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

1 Ответ

0 голосов
/ 29 мая 2019

Проблема в том, что вы используете атрибут checked, который не изменяется при взаимодействии пользователя с флажком.

Если вы измените свою логику для работы со свойством checked самого элемента, тогда логика будет работать правильно: 

$(function() {
  $("#tree-collapse-all").click(function() {
    $(".tree input").prop('checked', false);
  });

  $("#tree-expand-all").click(function() {
    $(".tree input").prop("checked", true);
  });
});
ol,
ul {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
}

body {
  margin: 30px;
  font-family: sans-serif;
}

#fontSizeWrapper {
  font-size: 16px;
}

#fontSize {
  width: 100px;
  font-size: 1em;
}


/* ————————————————————–
  Tree core styles
*/

.tree {
  margin: 1em;
}

.tree input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.tree input~ul {
  display: none;
}

.tree input:checked~ul {
  display: block;
}


/* ————————————————————–
  Tree rows
*/

.tree li {
  line-height: 1.2;
  position: relative;
  padding: 0 0 1em 1em;
}

.tree ul li {
  padding: 1em 0 0 1em;
}

.tree>li:last-child {
  padding-bottom: 0;
}


/* ————————————————————–
  Tree labels
*/

.tree_label {
  position: relative;
  display: inline-block;
  background: #fff;
}

label.tree_label {
  cursor: pointer;
}

label.tree_label:hover {
  color: #666;
}


/* ————————————————————–
  Tree expanded icon
*/

label.tree_label:before {
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  float: left;
  margin: 0 1em 0 -2em;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  content: '+';
  text-align: center;
  line-height: .9em;
}

:checked~label.tree_label:before {
  content: '–';
}


/* ————————————————————–
  Tree branches
*/

.tree li:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.5em;
  display: block;
  width: 0;
  border-left: 1px solid rgb(7, 240, 112);
  content: "";
}

.tree_label:after {
  position: absolute;
  top: 0;
  left: -1.5em;
  display: block;
  height: 0.5em;
  width: 1em;
  border-bottom: 1px solid rgb(79, 7, 247);
  border-left: 1px solid rgb(240, 6, 6);
  border-radius: 0 0 0 .3em;
  content: '';
}

label.tree_label:after {
  border-bottom: 0;
}

:checked~label.tree_label:after {
  border-radius: 0 .3em 0 0;
  border-top: 1px solid rgb(79, 7, 247);
  border-right: 1px solid rgb(240, 6, 6);
  border-bottom: 0;
  border-left: 0;
  bottom: 0;
  top: 0.5em;
  height: auto;
}

.tree li:last-child:before {
  height: 1em;
  bottom: auto;
}

.tree>li:last-child:before {
  display: none;
}

.tree_custom {
  display: block;
  background: #eee;
  padding: 1em;
  border-radius: 0.3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a href="#" id="tree-expand-all">Expand all</a> | <a href="#" id="tree-collapse-all">Collapse all</a></p>

<br /><br />
<div id="fontSizeWrapper">
  <label for="fontSize">Font size</label>
  <input type="range" value="1" id="fontSize" step="0.5" min="0.5" max="5" />
</div>
<ul class="tree">
  <li>
    <input type="checkbox" id="c1" />
    <label class="tree_label" for="c1">Level 0</label>
    <ul>
      <li>
        <input type="checkbox" id="c2" />
        <label for="c2" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li><span class="tree_label">Level 2</span></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="c3" />
        <label for="c3" class="tree_label">Looong level 1 <br />label text <br />with line-breaks</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li>
            <input type="checkbox" id="c4" />
            <label for="c4" class="tree_label"><span class="tree_custom">Specified tree item view</span></label>
            <ul>
              <li><span class="tree_label">Level 3</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="c5" />
    <label class="tree_label" for="c5">Level 0</label>
    <ul>
      <li>
        <input type="checkbox" id="c6" />
        <label for="c6" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="c7" />
        <label for="c7" class="tree_label">Level 1</label>
        <ul>
          <li><span class="tree_label">Level 2</span></li>
          <li>
            <input type="checkbox" id="c8" />
            <label for="c8" class="tree_label">Level 2</label>
            <ul>
              <li><span class="tree_label">Level 3</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...