Question

我打算在菜单打开时将文本从“菜单”更改为“关闭菜单”。我不知道该怎么做。

这是我的HTML：

<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label">
    <span>&#9776;</span> Menu
</label>

<nav>
    <ul>
        <li><a href="download.php">Download Apps</a></li>
        <li><a href="manual.php">Download Manuals</a></li>
    </ul>
</nav>

这是我的CSS：

/* MENU */

/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label {
    display: none;
    font-size: 15pt;
}

/* declarations for the not-responsove-menu */
nav {
    width: 220px;  /* Darüber laesst sich die breite des Aufklappmenue steuern */
    margin-left: -10px;  
    background: black
}

nav ul {
    padding: 0px;
    margin-left: -10px;
    margin-top: 43px;
}

nav a {
    display: block;
    background: #FFF;
    text-decoration: none;
    color: white;
    font-size: 15pt;
}

nav ul li {
    position: relative;
    float: left;
    list-style: none;
    color: #FFF;
    transition: 0.5s;
}

/* Declarations for the responsive menu 1680px */
@media screen and (max-width: 15360px) {

    * {
        font-size: 15pt;
    }

    label.responsive-nav-label {
        position: relative;
        display: block;
        padding: 0px;
        background: black;
        cursor: pointer;
        color: #fff;
    }

    nav {
        position: absolute;
        top: -9999px;
        padding: 0px;
    }

    input#responsive-nav[type=checkbox]:checked ~ nav {
        position: relative;
        top: 0;
    }

    nav a:after {
        display: none;
    }

    nav li {
        float: none !important;
        width: 100% !important;
        border-bottom: none !important;
    }

    nav li a {
        margin-bottom: 10px !important;
        padding: 10px 20px !important; 
        background: black;
    }

    nav ul li:hover {
        background: none;
    }

    nav ul li a:hover {
        background: black;
        color: #11BEE0
    }
}
/* END OF MENU */

Answer 1

最简单的方法是从实际的html中删除单词“Menu”，并将两个数据属性添加到要在其间切换的菜单

所以你的标签看起来像这样

<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>&#9776;</span></label>

接下来，您必须根据是否选中复选框来切换内容，使用2种样式

/* toggle the menu text */
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{
  content: attr(data-open);
}
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{
  content: attr(data-closed);
}

这是您可以测试的完整代码

/* hide the checkbox and the label */

input#responsive-nav,
label.responsive-nav-label {
content: "Menu Hide";
display: none;
font-size: 15pt;
}

/* declarations for the not-responsove-menu */

nav {
  width: 220px;  /* Darüber laesst sich die breite des Aufklappmenue steuern */
  margin-left: -10px;  
background: black;
}

nav ul {
  padding: 0px;
  margin-left: -10px;
  margin-top: 43px;
}

nav a {
  display: block;
  background: #FFF;
  text-decoration: none;
 color: white;
 font-size: 15pt;
}

nav ul li {
  position: relative;
  float: left;
  list-style: none;
  color: #FFF;
  transition: 0.5s;
} 

/* Declarations for the responsive menu 1680px */
@media screen and (max-width: 15360px) {

* {
font-size: 15pt;
}


label.responsive-nav-label {
  position: relative;
  display: block;
  padding: 0px;
  background: black;
  cursor: pointer;
  color: #fff;
  
}

nav {
  position: absolute;
  top: -9999px;
  padding: 0px;
}

input#responsive-nav[type=checkbox]:checked ~ nav {
  position: relative;
  top: 0;
}

/* toggle the menu text */
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{
  content: attr(data-open);
}
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{
  content: attr(data-closed);
}

nav a:after {
  display: none;
}

nav li {
  float: none !important;
  width: 100% !important;
  border-bottom: none !important;
}

nav li a {
  margin-bottom: 10px !important;
  padding: 10px 20px !important; 
background: black;
}

nav ul li:hover {
  background: none;
}

nav ul li a:hover {
  background: black;
  color: #11BEE0
}

}
/* END OF MENU */

<input type="checkbox" id="responsive-nav">

<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>&#9776;</span></label>

<nav>
  <ul>
    <li><a href="download.php">Download Apps</a></li>
    <li><a href="manual.php">Download Manuals</a></li>
  </ul>
</nav>

Answer 2

你的问题也有类似的问题。

如果您坚持用css替换文本内容，可以访问以下链接。

How to change content on hover

否则强烈建议使用javascript代替css来替换或切换内容。

$(document).on("click","#menu-label",function(){
var $this = $(this);

 if ($this.text() === "Menu"){
      $this.text("Close")
 }else {
      $this.text("Menu")
 }
});

/* hide the checkbox and the label */

input#responsive-nav,
label.responsive-nav-label {
display: none;
font-size: 15pt;
}

/* declarations for the not-responsove-menu */

nav {
  width: 220px;  /* Darüber laesst sich die breite des Aufklappmenue steuern */
  margin-left: -10px;  
background: black
}

nav ul {
  padding: 0px;
  margin-left: -10px;
  margin-top: 43px;
}

nav a {
  display: block;
  background: #FFF;
  text-decoration: none;
 color: white;
 font-size: 15pt;
}

nav ul li {
  position: relative;
  float: left;
  list-style: none;
  color: #FFF;
  transition: 0.5s;
} 

/* Declarations for the responsive menu 1680px */
@media screen and (max-width: 15360px) {

* {
font-size: 15pt;
}


label.responsive-nav-label {
  position: relative;
  display: block;
  padding: 0px;
  background: black;
  cursor: pointer;
  color: #fff;
}

nav {
  position: absolute;
  top: -9999px;
  padding: 0px;
}

input#responsive-nav[type=checkbox]:checked ~ nav {
  position: relative;
  top: 0;
}

nav a:after {
  display: none;
}

nav li {
  float: none !important;
  width: 100% !important;
  border-bottom: none !important;
}

nav li a {
  margin-bottom: 10px !important;
  padding: 10px 20px !important; 
background: black;
}

nav ul li:hover {
  background: none;
}

nav ul li a:hover {
  background: black;
  color: #11BEE0
}

}
/* END OF MENU */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label" ><span>&#9776;</span> <span id="menu-label">Menu</span></label>

<nav>
  <ul>
    <li><a href="download.php">Download Apps</a></li>
    <li><a href="manual.php">Download Manuals</a></li>
  </ul>
</nav>

Answer 3

由于您已经使用checkbox hack作为菜单，我们也可以使用它来显示和隐藏标签内的文字。

在标签内部，我们添加两个<span>以及相应的文字：

<label for="responsive-nav" class="responsive-nav-label">
 <span>&#9776;</span> 
 <span class="open">Close Menu</span>
 <span class="closed">Menu</span>
</label>

由于我们希望“关闭菜单”最初被隐藏，我们添加

.open {
  display: none
}

到我们的CSS。

选中复选框（意味着菜单可见），只需隐藏“菜单”并显示“关闭菜单”：

input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .closed {
  display: none;
}

input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .open {
  display: inline;
}

这是jsfiddle with the working code。

使用CSS更改文本名称

3 个答案: