有人可以讓這個腳本更簡單嗎？

-1

我目前使用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都會顯示/隱藏段落，但當然我可以調整腳本以直接從受影響的DIV中獲取信息並進行顯示/隱藏操作。

編輯：

我想我已經解釋了這是錯誤的。我指的是這一部分：

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

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

當然需要改變成1個功能，而不是2或然而，許多的DIV我需要顯示/隱藏。

來源

2015-12-03 Emily Adler

刪除'

我認爲你正在尋找如下：

https://jsfiddle.net/sq6znmm0/

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

注意p1和p2不是有效的HTML標記。我還從menubox中刪除了這些數字，所以jQuery與兩者都匹配。

來源

2015-12-03 10:37:06 Ivar

當p是被點擊的對象的同級時，此方法運行良好 – mplungjan

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

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

    } 

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

雖然一個很好的做法也將使用spcific CSS類像mplungjan建議

來源

2015-12-03 10:42:30 RobertPorter

爲什麼在功能中包裝document.ready？ – mplungjan

@mplungjan是的，這是很多:)修正我的例子 – RobertPorter

相關問題