Question

我正在尝试将一个图标作为一个复选框，显示在我的移动视图中，您可以点击显示并隐藏菜单，一切都可以点击并隐藏菜单

我的问题是试图找出如何将当前复选框显示为图像

不确定我做错了什么，有人能指出我正确的方向吗？提前致谢

我喜欢为我的复选框显示类似的东西

#menu-icon {

    display:inline-block;
    width: 40px;
    height: 40px;
    background: url(menu-icon.png) center;

}

的jsfiddle http://jsfiddle.net/g825b/

我的代码

<input id="menu-icon" type="checkbox">
<nav class="navMenu">
<label class="iconMenuLbl" for="menu-icon"></label>
<ul>

    <li>
        <a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a>
    </li>
    <li>
        <a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a>
    </li>
    <li>
        <a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a>
    </li>
    <li id="loggedin-box" class="">
        <form method="POST" action="login">
        <div>
            <strong>some name</strong>
        </div>
        <button style="padding:0px;" name="logout" type="submit">
        <img class="navImg" src="media/Sign-Out.png">
        </button>
        </form>
    </li>
</ul>
</nav>

JS

$(function() {
  var menuVisible = false;
  $('#menu-icon').click(function() {
    if (menuVisible) {
      $('.navMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('.navMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('.navMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

Answer 1

将输入的标签显示为图像而不是输入本身。

此解决方案也不需要任何脚本，仅限CSS。

#wrapper { height: 60px; background: #222; position: relative; }
#myMenu { display: none; }
#myMenu ul { width: 100%; padding: 0; margin: 0; position: absolute; top: 60px; left: 0; }
#myMenu li { text-align: center; height: 40px; line-height: 40px; background: #ddd; width: 100%; margin: 0; padding: 0; list-style: none; }
#menu-icon {
  display:none;
}
#menu-icon:checked ~ label[for="menu-icon"] {
  border: 5px solid red;
}
#menu-icon:checked ~ #myMenu {
  display: block;
}
.iconMenuLbl {
  position: absolute; right: 5px; height: 50px; width: 50px;
  border: 5px solid black;
  display:inline-block;
  background: url(http://lorempixel.com/60/60/animals) center;
}

<div id="wrapper">
  <input id="menu-icon" type="checkbox">
  <label class="iconMenuLbl" for="menu-icon"></label>
  <nav id="myMenu">
    <ul>
      <li>entry 1</li>
      <li>entry 2</li>
      <li>entry 3</li>
      <li>entry 4</li>
    </ul>
  </nav>
</div>

Answer 2

看看这个：

http://jsfiddle.net/jzr43qyf/

诀窍是为click事件上的复选框添加一个带有图像的类，并在下一次单击时删除它。使用toggleClass进行类交换，添加类或删除它（如果存在）。 / p>

＆＃13;

$(function() {
  var menuVisible = false;
  $('#menuBtn').click(function() {
  $(".checkbox").toggleClass("checked");
    if (menuVisible) {
      $('#myMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('#myMenu').css({'display':'block'});
    menuVisible = true;
    
  });
  $('#myMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

＆＃13;

#wrapper { height: 60px; background: #222; position: relative; }
#menuBtn { position: absolute; right: 0; height: 60px; width: 60px; background: #aaa; color: #fff; line-height: 60px; text-align: center; }
#myMenu { display: none; }
#myMenu ul { width: 100%; padding: 0; margin: 0; position: absolute; top: 60px; left: 0; }
#myMenu li { text-align: center; height: 40px; line-height: 40px; background: #ddd; width: 100%; margin: 0; padding: 0; list-style: none; }

.checkbox{display:block;width: 40px;    height: 40px;background: url(https://image.freepik.com/free-icon/check-box-empty-rounded-square_318-41751.png) center;background-size:cover}
.checkbox.checked{background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/3879-200.png) center;background-size:cover}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="menuBtn">click me<span class="checkbox checked"></span></div>
    <nav id="myMenu">
     
    </nav>
</div>

＆＃13;

Answer 3

完成纯CSS

＆＃13;

#menu-icon + label > * {
  display:none;
}
#menu-icon + label > img{
  display:block;
}

#menu-icon:checked + label > * {
  display:block;
}
#menu-icon:checked + label > img{
  display:none;
}

＆＃13;

<input id="menu-icon" type="checkbox">
<label class="iconMenuLbl" for="menu-icon">
        <img class="navImg" src="media/Sign-Out.png">
<ul>
    <li>
        <a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a>
    </li>
    <li>
        <a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a>
    </li>
    <li>
        <a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a>
    </li>
    <li id="loggedin-box" class="">
        <form method="POST" action="login">
        <div>
            <strong>some name</strong>
        </div>
        <button style="padding:0px;" name="logout" type="submit">
        <img class="navImg" src="media/Sign-Out.png">
        </button>
        </form>
    </li>
</ul></label>

＆＃13;

复选框不显示为图像

3 个答案: