javascript - 使 div 可点击和 javascript 运行一些不同的链接

Question

我在页面上的菜单有以下代码

<td width="200" valign="top" align="left" bgcolor="#ffffff">
    <div id="stemenu">
        <div id="mbuttonon">
            <a class="mwink" href="index.html">Home</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">About us</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">FAQs</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <div id="plus">
                <a href="javascript:animatedcollapse.toggle('aa')"><img src="images/plus.gif"></a>
            </div>
            <a class="mwink" href="index.html">Conditions we treat</a>
        </div>
        <div id="aa" style="width: 160px; display:none;">
            <ul>
                <li>
                    <a class="mlink" href="#">MSK</a>
                    <li>
                        <a class="mlink" href="#">Neurological</a>
                        <li>
                            <a class="mlink" href="#">Paediatrics</a>
                            <li>
                                <a class="mlink" href="#">Surgery</a>
            </ul>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">Our clinics</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <div id="plus">
                <a href="javascript:animatedcollapse.toggle('ab')"><img src="images/plus.gif"></a>
            </div>
            <a class="mwink" href="index.html">Services</a>
        </div>
        <div id="ab" style="width: 160px; display:none;">
            <ul>
                <li>
                    <a class="mlink" href="#">Clinic Appointments</a>
                    <li>
                        <a class="mlink" href="#">Gym rehabilitation</a>
                        <li>
                            <a class="mlink" href="#">Home visits</a>
                            <li>
                                <a class="mlink" href="#">Hydrotherapy</a>
                                <li>
                                    <a class="mlink" href="#">Musculoskeletal physiotherapy</a>
                                    <li>
                                        <a class="mlink" href="#">Neurological physiotherapy</a>
                                        <li>
                                            <a class="mlink" href="#">Paediatric physiotherapy</a>
            </ul>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <div id="plus">
                <a href="javascript:animatedcollapse.toggle('ac')"><img src="images/plus.gif"></a>
            </div>
            <a class="mwink" href="index.html">Treatments</a>
        </div>
        <div id="ac" style="width: 160px; display:none;">
            <ul>
                <li>
                    <a class="mlink" href="#">Acupuncture</a>
                    <li>
                        <a class="mlink" href="#">Electrotherapy</a>
                        <li>
                            <a class="mlink" href="#">Gait Ax</a>
                            <li>
                                <a class="mlink" href="#">Hydrotherapy</a>
                                <li>
                                    <a class="mlink" href="#">Manipulation</a>
                                    <li>
                                        <a class="mlink" href="#">Massage</a>
                                        <li>
                                            <a class="mlink" href="#">Neurological rehabilitation</a>
                                            <li>
                                                <a class="mlink" href="#">Orthotics</a>
                                                <li>
                                                    <a class="mlink" href="#">Paediatric physio</a>
                                                    <li>
                                                        <a class="mlink" href="#">Pain management</a>
                                                        <li>
                                                            <a class="mlink" href="#">Physiotherapy</a>
                                                            <li>
                                                                <a class="mlink" href="#">Respiratory treatment</a>
            </ul>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="6"></td>
            </tr>
        </table>
        <div id="mbutton">
            <a class="mwink" href="index.html">Contact us</a>
        </div>
        <table cellspacing="0" cellpadding="0" width="100%" align="center">
            <tr>
                <td width="100%" height="0"></td>
            </tr>
        </table>
    </div>
    <br>
    <br>
</td>

点击加号按钮打开子菜单，

我的问题是，如何使完整的 div 成为锚链接（单击 mbutton div 的任何部分，它应该跟随链接）在单击加号按钮时，它应该打开子菜单..

基本上，我想让所有部分都可点击，不仅仅是文本（例如主页，关于我们），而加号按钮也应该打开子菜单......

有人可以指导我吗？目前，要么我只能使锚文本可点击，要么我失去了 javascript 子菜单的打开......

我可以用 CSS 做吗？

Answer 1

display:block就是这样。

#plus a { display:block }

Answer 2

首先，您为多个元素放置了相同的 id，这是错误的。为每个元素分配 uniqpe Id 名称。
试试这个 ：

<td width="200" valign="top" align="left" bgcolor="#ffffff">
 <div id="stemenu">
 <div id="mbuttonon"><a class="mwink" href="index.html">Home</a></div>

<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><a class="mwink" href="index.html">About us</a></div>
<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><a class="mwink" href="index.html">FAQs</a></div>
<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><div id="plus"  class='plus'><a href="#"><img src="images/plus.gif">   </a></div> <a class="mwink" href="index.html">Conditions we treat</a></div> 
<div id="aa" style="width: 160px; display:none;">
<ul><li><a class="mlink" href="#">MSK</a>
<li><a class="mlink" href="#">Neurological</a>
<li><a class="mlink" href="#">Paediatrics</a>
<li><a class="mlink" href="#">Surgery</a>
</ul></div>

<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><a class="mwink" href="index.html">Our clinics</a></div>
<table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>
<div id="mbutton"><div id="plus" class='plus'><a href="#"><img src="images/plus.gif">    </a></div> <a class="mwink" href="index.html">Services</a></div> 
<div id="ab" style="width: 160px; display:none;">
<ul>
 <li><a class="mlink" href="#">Clinic Appointments</a>
 <li><a class="mlink" href="#">Gym rehabilitation</a>
 <li><a class="mlink" href="#">Home visits</a>
 <li><a class="mlink" href="#">Hydrotherapy</a>
 <li><a class="mlink" href="#">Musculoskeletal physiotherapy</a>
 <li><a class="mlink" href="#">Neurological physiotherapy</a>
 <li><a class="mlink" href="#">Paediatric physiotherapy</a>
 </ul></div>

 <table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td  width="100%" height="6"></td></tr></table>

 <div id="mbutton"><div id="plus"  class='plus'><a href="#"><img src="images/plus.gif"></a></div> <a class="mwink" href="index.html">Treatments</a></div> 
 <div id="ac" style="width: 160px; display:none;">
 <ul>
 <li><a class="mlink" href="#">Acupuncture</a>
 <li><a class="mlink" href="#">Electrotherapy</a>
 <li><a class="mlink" href="#">Gait Ax</a>
 <li><a class="mlink" href="#">Hydrotherapy</a>
 <li><a class="mlink" href="#">Manipulation</a>
 <li><a class="mlink" href="#">Massage</a>
 <li><a class="mlink" href="#">Neurological rehabilitation</a>
 <li><a class="mlink" href="#">Orthotics</a>
 <li><a class="mlink" href="#">Paediatric physio</a>
 <li><a class="mlink" href="#">Pain management</a>
 <li><a class="mlink" href="#">Physiotherapy</a>
 <li><a class="mlink" href="#">Respiratory treatment</a>
 </ul></div>

 <table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="6"></td></tr></table>

 <div id="mbutton"><a class="mwink" href="index.html">Contact us</a></div>
 <table cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td width="100%" height="0"></td></tr></table>

 </div>

 <br><br>

 </td>​

Javascript：

 jQuery(".plus").click(function(){
      jQuery(this).parent('div').next('div').slideToggle();
 });​

我已经为所有包含 plus 图像的 div 分配了一个通用类 'plus'，这样您就不需要为每个菜单编写代码。

这是演示。

Answer 3

对于这种行为，您需要使用 JavaScript。您可能更愿意使用 javascript 点击事件或使用像jQuery这样的轻松生活库

从user 999你那里可以：

var something = document.getElementById('something');

something.style.cursor = 'pointer';
something.onclick = function() {
    // do something...
};

使用 jQuery：

<div id="target">
  Click here
</div>

<script>
$(function(){

   $("#target").click(function() {
     alert("Handler for .click() called.");
   });
 });
</script>

更新 使用您的代码示例，并使用 jQuery，我们可以执行类似的操作

    <!-- import jQuery library -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>

    <!-- JavaScript code for clicking the menu -->
    <script>
    $(function(){

       $("#mbutton").click(function() {
         window.location="http://google.com";
       });
    });
    </script>
    <div id="mbutton" style="cursor:pointer">
        <a class="mwink" href="index.html">About us</a>
    </div>

希望你能更好地理解它。