Question

我的网站导航栏中有各种各样的按钮，我想在点击时做一些事情：

1. Open an overlay relative to the button pressed
2. Close any other open overlays
3. Add a border to the button until that button's related overlay is closed.

我的导航栏看起来像这样：

<div id="navbar">
    <div class="signup_btn">Sign Up</div>
    <div class="login_btn">Login</div>
</div>

这里是叠加层html：

<div class="signup_overlay">
    <!-- FORM HERE -->
</div>
<div class="login_overlay">
    <!-- FORM HERE -->
</div>

和JQuery扩展叠加/关闭其他：

<script type="text/javascript">
$('.signup_btn').click(function() {
    $('.login_overlay').hide();
    $('.signup_overlay').slideToggle( 300 );
});

$('.login_btn').click(function() {
    $('.signup_overlay').hide();
    $('.login_overlay').slideToggle( 300 );
});
</script>

当我在导航栏中添加更多按钮时，我觉得每个按钮都有很多不必要的CSS，因此JQuery可以获得正确的元素。有没有更清洁，更有效的方法来做到这一点？

另外，要将边框添加到与当前叠加相关的按钮底部，是否应该使用Javascript完成，还是使用CSS进行干净/不重复的方式？

Answer 1

您可以为所有触发元素和叠加层添加公共类，然后编写单个句柄，如下所示

<div id="navbar">
    <div class="signup_btn btn" data-target=".signup_overlay">Sign Up</div>
    <div class="login_btn btn" data-target=".login_overlay">Login</div>
</div>
<div class="signup_overlay overlay">signup_overlay</div>
<div class="login_overlay overlay">login_overlay</div>

然后

$('#navbar .btn').click(function () {
    var target = $(this).data('target');
    $('.overlay').not(target).hide();
    $(target).slideToggle(300);
});

演示：Fiddle

Answer 2

当我在导航栏中添加更多按钮时，我觉得每个按钮都有很多不必要的CSS，因此JQuery可以获得正确的元素。有没有更清洁，更有效的方法来做到这一点？

这取决于，只要您记住CSS的主要目的是为HTML元素提供样式，如果您在设计和规划方法时记住这一点，那么您的工作没有任何问题。

我的意思是，如果您的按钮各自需要不同的风格，那么这是最直接的方式。但是，如果您为按钮指定不同的CSS类，仅仅是为了标记/识别每个按钮，以便jQuery定位特定按钮，那么那就错了......它会起作用但它会起作用对于拥有一点设计技巧的人来说，看起来就像一个代码味道。你能做的是......

为按钮分配不同的id并按ID
选择它们
$("#element_id);
添加自定义数据属性，您可以根据需要为其命名，例如

然后使用不显眼的javascript来选择它们

$("[data-field=login]")

另外，要将边框添加到与当前叠加相关的按钮底部，是否应该使用Javascript完成，还是使用CSS进行干净/不重复的方式？

如果您将display:absolute设置为叠加层，最好使用CSS而不是javascript。你也可以给他们z-index坐在其他元素之上

Answer 3

您可以使用一个对所有按钮具有相同样式的按钮类，并为每个按钮指定一个将在您的jquery中引用的单个ID。

例如：

<div id="navbar">
    <div class="btn" id="signup_btn">Sign Up</div>
    <div class="btn" id="login_btn">Login</div>
</div>

使用不同的类名更改活动按钮上的CSS

3 个答案: