Question

我想将文件夹图标（已关闭）更改为文件夹（已打开）。这是我的html / php代码：

<div class="css-treeview">
    <ul>
        <?php
        $Hostname_dir = scandir("****");
        $Hostename_number = '0';
        $Script_number = '0';
        $Hostename_number = '0';
        function count_dir($dir) {
            if ($dir['0'] == '.') {
                unset($dir['0']);
            }
            if ($dir['1'] == '..') {
                unset($dir['1']);
            }
            if ($dir['2'] == '.DS_Store') {
                unset($dir['2']);
            }
            return $dir;
        }

        $Hostname_dir = count_dir($Hostname_dir);
        foreach ($Hostname_dir as $Hostname) {
            $Script_dir = scandir("****");
            $Script_dir = count_dir($Script_dir);
        ?>
        <li>
            <span class="fa-layers fa-fw fa-4x">
                <i class="fas fa-folder" data-fa-transform="down-2"></i>
                <span class="fa-layers-counter" style="background:Tomato"><?php echo count($Script_dir); ?></span>
            </span>
            <input type="checkbox" id="item-<?php echo $Hostename_number; ?>" />
            <label class="name" for="item-<?php echo $Hostename_number; ?>"><?php echo $Hostname; ?></label>
            <ul class="fa-ul">
                <?php
                foreach ($Script_dir as $Script) {
                    $Script_file = scandir("*****");
                    $Script_file = count_dir($Script_file);
                ?>
                <li>
                    <span class="fa-layers fa-fw fa-4x">
                        <i class="fas fa-folder" data-fa-transform="down-2"></i>
                        <span class="fa-layers-counter" style="background:Tomato"><?php echo count($Script_file); ?></span>
                    </span>
                    <input type="checkbox" id="item-0-<?php echo $Script_number; ?>" />
                    <label class="name" for="item-0-<?php echo $Script_number; ?>"><?php echo $Script; ?></label>
                    <ul>
                        <?php
                        foreach ($Script_file as $file) {
                        ?>
                        <li class="file">
                            <i class="fas fa-file-archive fa-2x" style="color:red"></i>
                            <a class="link name" href="./"><?php echo $file; ?></a>
                        </li>
                        <?php
                        }
                        ?>
                    </ul>
                </li>
                <?php
                $Script_number++;
                }
                ?>
            </ul>
        </li>
        <?php
        $Hostename_number++;
        }
        ?>
    </ul>
</div>

这段代码非常适合我！看截图：

当用户点击该文件夹时，我想将黑色文件夹更改为打开的文件夹，如this。

是否可以在左侧添加plus和minus？

你能帮帮我吗？

Answer 1

以下是我如何使用jQuery实现这一点：

＆＃13;

(function($) {
  $(document).ready(function() {
    $("label.label_one").click(function() {
      $('span.span_one svg')
        .toggleClass('fas fa-folder-open')
        .toggleClass('fas fa-folder');
    });
    $("label.label_two").click(function() {
      $('span.span_two svg')
        .toggleClass('fas fa-folder-open')
        .toggleClass('fas fa-folder');
    });
    $("label.label_three").click(function() {
      $('span.span_three svg')
        .toggleClass('fas fa-folder-open')
        .toggleClass('fas fa-folder');
    });
    $("label.label_one").click(function() {
      $('span.span_1 svg')
        .toggleClass('fas fa-minus')
        .toggleClass('fas fa-plus');
    });
    $("label.label_two").click(function() {
      $('span.span_2 svg')
        .toggleClass('fas fa-minus')
        .toggleClass('fas fa-plus');
    });
    $("label.label_three").click(function() {
      $('span.span_3 svg')
        .toggleClass('fas fa-minus')
        .toggleClass('fas fa-plus');
    });
  })
})(jQuery);

＆＃13;

a.link {
  text-decoration: none;
  color: inherit;
}

a.link:hover {
  text-decoration: none;
  color: #3664A9;
}


/* Darstellung der Baumstruktur */

.css-treeview ul,
.css-treeview li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.css-treeview input {
  position: absolute;
  opacity: 0;
}

.css-treeview {
  font: normal 11px "Segoe UI", Arial, Sans-serif;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.css-treeview input+label+ul {
  margin: 0 0 0 22px;
}

.css-treeview input~ul {
  display: none;
}

.css-treeview label,
.css-treeview label::before {
  cursor: pointer;
}

.css-treeview input:disabled+label {
  cursor: default;
  opacity: .6;
}

.css-treeview input:checked:not(:disabled)~ul {
  display: block;
}

.css-treeview label,
.css-treeview label::before {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  vertical-align: middle;
}

.css-treeview label {
  background-position: 18px 0;
}

.css-treeview label::before {
  content: "";
  width: 16px;
  margin: 0 22px 0 0;
  vertical-align: middle;
  background-position: 0 -32px;
}

.css-treeview input:checked+label::before {
  background-position: 0 -16px;
}

.css-treeview label.name {
  margin-left: -35px;
  margin-bottom: 10px;
  font-size: 25px;
}

.css-treeview button.name {
  border: none;
  background: initial;
  font-size: 15px;
}

.css-treeview li.file {
  padding-bottom: 5px;
}

.css-treeview span.folder {
  color: #15aabf;
}

.css-treeview span.archive {
  color: #E5C657;
}


/* webkit adjacent element selector bugfix */

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .css-treeview {
    -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
  }
  @-webkit-keyframes webkit-adjacent-element-selector-bugfix {
    from {
      padding: 0;
    }
    to {
      padding: 0;
    }
  }
}

＆＃13;

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="/info-show/style/test/test.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="css-treeview">
  <ul>
    <li>
      <span class="fa-layers fa-fw fa-2x span_1" Style="color: red;">
    						<i class="fas fa-plus"></i>
    					</span>
      <span class="fa-layers fa-fw fa-4x span_one" Style="color: red;">
    						<i class="fas fa-folder" data-fa-transform="down-2"></i>
    						<span class="fa-layers-counter" style="background:Tomato">2</span>
      </span>
      <input type="checkbox" id="item-0" />
      <label class="name label_one" for="item-0">Folder 1</label>
      <ul class="fa-ul">
        <li>
          <span class="fa-layers fa-fw fa-2x span_2" Style="color: red;">
    								<i class="fas fa-plus"></i>
    							</span>
          <span class="fa-layers fa-fw fa-4x span_two" Style="color: red;">
    								<i class="fas fa-folder" data-fa-transform="down-2"></i>
    								<span class="fa-layers-counter" style="background:Tomato">2</span>
          </span>
          <input type="checkbox" id="item-0-0" />
          <label class="name label_two" for="item-0-0">File Folder 1</label>
          <ul>
            <li class="file">
              <i class="fas fa-file-archive fa-2x"></i>
              <a class="link" href="./">File 1</a>
            </li>
            <li class="file">
              <i class="fas fa-file-archive fa-2x"></i>
              <a class="link" href="./">File 2</a>
            </li>
          </ul>
        </li>
        <li>
          <span class="fa-layers fa-fw fa-2x span_3" Style="color: red;">
    								<i class="fas fa-plus"></i>
    							</span>
          <span class="fa-layers fa-fw fa-4x span_three" Style="color: red;">
    								<i class="fas fa-folder" data-fa-transform="down-2"></i>
    								<span class="fa-layers-counter" style="background:Tomato">3</span>
          </span>
          <input type="checkbox" id="item-0-1" />
          <label class="name label_three" for="item-0-1">File Folder 2</label>
          <ul>
            <li class="file">
              <i class="fas fa-file-archive fa-2x"></i>
              <a class="link" href="./">File 1</a>
            </li>
            <li class="file">
              <i class="fas fa-file-archive fa-2x"></i>
              <a class="link" href="./">File 2</a>
            </li>
            <li class="file">
              <i class="fas fa-file-archive fa-2x"></i>
              <a class="link" href="./">File 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

Fontawesome将关闭文件夹更改为打开文件夹

1 个答案: