0

这是我的项目：jsFiddle

在菜单栏中有 3 个链接，打开 3 个不同的子菜单，每个子菜单都包含一个关闭链接。

当链接悬停时，它们会显示页面 url。为避免这种情况，我想将（链接）更改为<input>按钮。

网页：

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="menu_f_si">
    <div id="middle_popup">
        <h1>Middle</h1>
        <p>Bla bla bla bla bla</p>
        <a href="#middle">Close</a>
    </div>
    <div id="right_popup">
         <h1>Right</h1>
         <p>Bla bla bla bla bla</p>
         <a href="#right">Close</a>
    </div>
    <div id="left_popup">
         <h1>Left</h1>
         <p>Bla bla bla bla bla</p>
         <a href="#left">Close</a>
    </div>
</div>
<div id="menu_f_li">
    <ul id="menu_f_ll">
        <li><a href="#left">left menu</a></li>
        -
        <li><a href="#middle">middle menu</a></li>
        -
        <li><a href="#right">right menu</a></li>
    </ul>
</div>

jQuery :

$(document).ready(
 function()
 {$('#menu_f_ll li a').click(
   function(e)
   {e.preventDefault();
    animateSlider(this.hash);
   }
  );
  $('#menu_f_si div a').click(
   function(e)
   {e.preventDefault();
    animateSlider(this.hash);
   }
  );
  function animateSlider(hash)
  {if (!$('#menu_f_si div.open').length)
   {if (hash == '#middle') {openPopup(hash);}
    if (hash == '#right') {openPopup(hash);}
    if (hash == '#left') {openPopup(hash);}
   }
   else
   {if (hash == '#middle') {openAndClose(hash)}
    if (hash == '#right') {openAndClose(hash)}
    if (hash == '#left') {openAndClose(hash)}
   }
  }
  function openPopup(hash)
  {$(hash + '_popup').slideToggle().addClass('open');}
  function openAndClose(hash)
  {if ($(hash + '_popup').hasClass('open'))
   {$($(hash + '_popup')).slideToggle().removeClass();}
   else
   {$('#menu_f_si div.open').slideToggle().removeClass();
    $(hash + '_popup').slideToggle().addClass('open');
   }
  }
 }
);

我已经能够在其他示例中这样做，但在这种情况下，jQuery 使用 (hash) 我似乎无法用<input>.

所以我的问题是：我可以将（链接）更改为<input>按钮吗？（以及如何）

感谢您抽出宝贵的时间来帮助我 :)

4

3 回答 3

1

只需使用一些自定义属性而不是hrefs a。因为您正在使用href，所以浏览器决定添加工具提示，但如果您使用了一些自定义名称，例如menuidand 而不是this.hash在您的 javascript 中使用，请使用$(this).attr('menuid');.

对于 JavaScript：

animateSlider($(this).attr('menuid'));

代替

animateSlider(this.hash);

对于 HTML：

<li><a menuid="#left">left menu</a></li>

代替

<li><a href="#left">left menu</a></li>

这将消除浏览器工具提示。您将需要添加一些 CSS 来替换手形光标：cursor: pointer;到as.

看到这个JSFiddle

于 2013-10-08T06:07:32.867 回答
1

我已经更新了小提琴：http: //jsfiddle.net/Ha8Gh/7/删除了所有链接。

使用数据属性获取要打开的菜单，并使用类而不是元素来绑定点击事件。

使用 CSS，您可以使用cursor: pointer来指示li和关闭跨度是可点击的。

于 2013-10-08T06:10:59.787 回答
0

已修改您的代码，

检查这个：

$('#menu_f_ll li input').click( //change here

function (e) {
    e.preventDefault();
    animateSlider($(this).attr('tabid')); //change here
});
$('#menu_f_si div input').click( //change here

function (e) {
    e.preventDefault();

    animateSlider($(this).attr('tabid')); //change here
});

演示

于 2013-10-08T06:06:49.017 回答