Question

嘿，我是jquery和java的新手。如图所示，我有两个向下滑动的文本，它们必须分开工作，但是右边的文本无法正常工作。

http://s7.directupload.net/file/d/3485/3xjuqtbh_jpg.htm

这是我的jquery代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>

    <script>
    $(document).ready(function(){
    $("button").click(function(){
    $("p").slideToggle();
    });
    });
    </script>

    <script>
    $(document).ready(function(){
    $("enter").click(function(){
    $("pi").slideToggle();
    });
    });
    </script>

和我的HTML代码：

 <div id="Max Mustermann">

 [...]

 <p style="display:none;">Hallelulja</p><button>Read more...</button>

 </div>



 <div id="Max Mustermann 2">

 [...]

 <pi style="display:none;">Hallelulja</pi><enter>Read more...</enter>

 </div>

代码如何看起来正确的代码正常工作？感谢您的帮助！

Answer 1

1）尝试给你的p和button一些id or class，以便知道要切换的元素

2）将您的pi和enter更改为p或按钮标记

3）只需要一个$(document).ready功能。将所有脚本放入其中。

4）您也可以尝试使用CSS类提供display:none。

5）如果有多个slideToggle()功能，而不是为每个按钮编写，则需要一般性地编写代码。

请参阅下面的编辑代码

HTML：

<div id="Max Mustermann">    
 [...]    
 <p id="para-1" class="displaynone">Hallelulja</p>
 <button id="button-1">Read more...</button>    
 </div> 

 <div id="Max Mustermann 2">    
 [...]    
 <p id="para-2" class="displaynone">Hallelulja</pi>
 <button id="button-2">Read more...</button>    
 </div>

CSS：

 .displaynone{display:none;}

脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
    $(document).ready(function(){
    $("#button-1").click(function(){
    $("#para-1").slideToggle();
    });       
    $("#button-2").click(function(){
    $("#para-2").slideToggle();
    });
    });
    </script>

jquery 2不同的幻灯片切换器无法正常工作

1 个答案: