Question

我正在为我的网站制作一个下拉菜单，现在它可以正常工作但是当我再次点击链接时，我遇到的问题是它不能很好地工作，因为我不擅长JavaScript所以我需要一些帮助来自所有您。谢谢你的时间。

这是我的代码：

    var hideall = $('#woman,#man,#device,#health,#living,#device');

    $('#woman-li').click(function() {
      $(hideall).hide(), $('#woman').show();
    });


    $("#man-li").click(function() {
      $(hideall).hide(), $('#man').show();
    });


    $("#health-li").click(function() {
      $(hideall).hide(), $('#health').show();
    });

    #woman,
    #man,
    #health,
    #device,
    #living {
      display: none;
    }

<div id='cssmenu'>
  <ul>
    <li class='active'><a href='#'><span>Home</span></a>
    </li>
    <li>
      <a href="#"> <span id="woman-li">Woman</span> 
      </a>
    </li>
    <li>
      <a href="#"> <span id="man-li">Man</span> 
      </a>
    </li>
    <li>
      <a href="#"> <span id="health-li">Health</span> 
      </a>
    </li>
  </ul>


  <div id='woman'>

    <div class="tb-container">
      <div class="tb-head">face</div>
      <div class="tb-content">
        <a href="#">
          <p>face</p>
        </a>
      </div>
    </div>
  </div>

  <div id='man'>

    <div class="tb-container">
      <div class="tb-head">face</div>
      <div class="tb-content">
        <a href="#">
          <p>face</p>
        </a>
      </div>
    </div>
  </div>

  <div id='health'>

    <div class="tb-container">
      <div class="tb-head">face</div>
      <div class="tb-content">
        <a href="#">
          <p>face</p>
        </a>
      </div>
    </div>
  </div>

Answer 1

根据我的经验，使用列表项更容易，然后有一个onclick处理程序，可以将您引导到页面（更加整洁的样式）。也许这样的事情就是你之后的事情？ https://jsfiddle.net/Domination/erdhvjvm/7/

HTML：

<div id='cssmenu'>
    <ul>
        <li id='home' class='active'>Home
            <div>Face</div>
        </li>
        <li id='woman'>Woman
            <div>Face</div>
        </li>
        <li id='man'>Man
            <div>Face</div>
        </li>
        <li id='health'>Health
            <div>Face</div>
        </li>
    </ul>
</div>

CSS：

#cssmenu ul{
    border-top:1px solid black;
    padding:0;
}
#cssmenu li{
    background:red;
    border:1px solid black;
    border-top:0;
    cursor:pointer;
    list-style-type:none;
    padding:0.5em;
}
#cssmenu li.active{
    background:green;
}
#cssmenu div{
    margin-left:15px;
}

JS：

//Hides all initially
$('#cssmenu ul li div').hide();

//On click of one of the list items
$('#cssmenu ul li').click(function(e){
    if (e.target == this){ //If you've actually clicked on it (not a child of it)

        //Stops all previous animations
        $('#cssmenu ul li div').stop(); 

        //Slides all others up
        $(this).siblings().find('div').slideUp(); 

        //Removes class from others
        $(this).siblings().removeClass('active'); 

        //Slides selected down or up (toggles it)
        $(this).find('div').slideToggle();

        //Adds class to the element
        $(this).addClass('active');
    }
});

//On click on the children of the menu
$('#cssmenu ul li div').click (function(){
    alert("You clicked on a child");
    alert("Go to link: " + $(this).attr('link'))

    //Uncomment to enable links
    //window.location.href = $(this).attr('link');
})

菜单点击下拉JS

1 个答案: