有人可以使这个脚本更简单吗？

Question

我目前正在使用 2 个 javascript 函数，应该只需要一个。

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

div.menubox1 {
background-color: #323232;
height: 50px;

}

div.menubox2 {
background-color: #323232;
height: 50px;

}

div.relative {
position: relative;
top: 26%;
left: 7.6%;
border: 0px;
width: 200px;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div.menubox1").click(function(){
        $("p1").toggle();
    });
});
</script>

<script>
$(document).ready(function(){
    $("div.menubox2").click(function(){
        $("p2").toggle();
    });
});
</script>

</head>
<body>

<div class="menubox1"><div class="relative"> » test 1</div></div>
<p1>This is a paragraph with little content.</p1>

<div class="menubox2"><div class="relative"> » test 2</div></div>
<p2>This is another small paragraph.</p2>

</body>
</html>

这确实有效，例如每个 DIV 都会 show/hide 段落，但我肯定可以调整脚本以直接从受影响的 DIV 获取信息并执行 show/hide 操作。

编辑：

我想我解释错了。我指的是这部分：

   <script>
    $(document).ready(function(){
        $("div.menubox1").click(function(){
            $("p1").toggle();
        });
    });
    </script>

    <script>
    $(document).ready(function(){
        $("div.menubox2").click(function(){
            $("p2").toggle();
        });
    });
    </script>

当然需要更改为 1 个功能而不是 2 个功能，或者我需要 show/hide 的 DIV 数量。

Answer 1

使用一个 class 并将事件处理程序添加到 class - 要区分 div，请使用 ID。同时将 <p1 / <p2 更改为 <p id="p1" 和 <p id="p2"

$(function() {
  $("div.menubox").on("click",function() {
    var idx = this.id.replace(/menubox/, ""); // or use data-idx attribute
    $("#p" + idx).toggle(); // or $(this).next().toggle(); if p is always after the div
  });
});

div.menubox {
  background-color: #323232;
  height: 50px;
}
div.relative {
  position: relative;
  top: 26%;
  left: 7.6%;
  border: 0px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menubox" id="menubox1">
  <div class="relative">» test 1</div>
</div>
<p id="p1">This is a paragraph with little content.</p1>

<div class="menubox" id="menubox2">
  <div class="relative">» test 2</div>
</div>
<p id="p2">This is another small paragraph.</p2>

Answer 2

我认为您正在寻找以下内容：

https://jsfiddle.net/sq6znmm0/

$(document).ready(function(){
    $("div.menubox").click(function(){
        $(this).next('p').toggle();
    });
});

请注意 p1 和 p2 不是有效的 HTML 标签。我还从您的 menubox 中删除了数字，因此 jQuery 与两者都匹配。

Answer 3

$(document).ready(function(){
    function attachClickHandlers(clickElement, toggleElement) {

            $(clickElement).click(function(){
                $(toggleElement).toggle();
            });

    }

    attachClickHandlers("div.menubox1", "p1");
    attachClickHandlers("div.menubox2", "p1");
});

虽然一个好的做法也是使用特定的 css class，就像 mplungjan 建议的那样

有人可以使这个脚本更简单吗？

Can someone make this script simpler?

javascript

css

show

hide