Question

我正在尝试弄清楚如何获得3个点而不是子弹。我也不想隐藏项目符号，因为当您单击显示更多按钮并使列表不均匀时，项目符号将在项目符号列表中显示为空白。我对JavaScript的了解不多，所以不确定如何解决此问题。

CC = g++
objects = main.o node.o

edit : $(objects)
    $(CC) -o edit $(objects)

main.o : main.cpp node.hpp

node.o : node.cpp node.hpp

.PHONY : clean
clean :
    rm edit $(objects)

Answer 1

为<li>跨度删除父dots元素将解决此问题。

<span id="dots">...</span>

实时示例：

<head>
	<script> 
    function myFunction() {
     var dots = document.getElementById("dots");
    var btnText = document.getElementById("myBtn");
    var more = document.querySelectorAll(".more");

    if (dots.style.display === "none") {
    more.forEach(el => el.classList.add("hidden"));
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    } else {
    more.forEach(el => el.classList.remove("hidden"));
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    }
    }
    </script>
    <style>
    #more {
      display: none;
    }

    .columns {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    position: relative;
    }

    .hed {
    font-size: 16px;
    font-weight: 800;
    list-style: none;
    margin: 15px 0px 5px;
    }

    .hidden {
    display: none;
    }	
	
    table.map-list td{
	width:50% !important;
	vertical-align: top !important;
	}
	
    </style>
	
	</head>

    <body>

    <table class="map-list" width="100%" border="0">
    <tbody>
      <tr>
        <td>
          <h4>Elementary</h4>
          <ul>
            <li>Maps: Primary: ELS</li>
            <li>Maps: Primary: Readiness</li>
            <span id="dots">...</span>
			  <li class="more hidden">U.S. History:8 Revolutionary 
    War</li>
          </ul>
        </td>

        <td>
          <h4>Secondary</h4>
          <ul>
            <li>Maps: Intermediate: Physical</li>
            <li>Maps: Intermediate: Political</li>
                     <li class="more hidden">Maps: Secondary: Population 
    Thematic</li>

          </ul>
        </td>
      </tr>
    </tbody>
    </table>
    <button onclick="myFunction()" id="myBtn">Read more</button>
    </body>

点击后的第二列移动+三个点不应成为项目符号

1 个答案: