Javascript.accordion（）不工作_Javascript_Jquery_Css_Html

Javascript.accordion（）不工作

javascript jquery css html

Javascript.accordion（）不工作,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我的网站上的javascript有问题：我的.mouseenter和.mouseleave已经解决了，多亏了你的帮助，但是我的手风琴仍然不工作。有什么想法吗这是我的密码： HTML: <!DOCTYPE html> <head> <!--Accordion is not working, mouseenter is only working in first product, header is not all the way to the l

我的网站上的javascript有问题：我的.mouseenter和.mouseleave已经解决了，多亏了你的帮助，但是我的手风琴仍然不工作。有什么想法吗

这是我的密码：

HTML:

    <!DOCTYPE html>
<head>
    <!--Accordion is not working, mouseenter is only working in first product, header is not all the way to the left-->
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap-theme.css" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="js/bootstrap.js" />
    <link rel="stylesheet" href="js/carousel.js" />
    <link rel="stylesheet" type="text/css" href="shopping.css" />
    <link rel="stylesheet"                                                      href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery- ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<header>
    <h4><mark>Student Project #5 H.B.</mark></h4></br>
    <h2>Premium Computer Supplies!</h2>
</header>
<body>
<!----------------------------------------------------------------->
    <div class="row" id="row">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img src="surface3.jpg" alt="Microsoft Surface">
            <!--Accordion heading-->
            <div class="accordion">
            <h4>Microsoft Surface Pro 3</h4>
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $999!</p>
                </div>
            </div>
        </div>
    </div>
<!----------------------------------------------------------------->
    <div class="row" id="row">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
            <!--Accordion heading-->
            <div id="accordion">
            <h4>Microsoft Surface Pro 3 Typer Cover</h4>
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $129!</p>
                </div>
            </div>
        </div>
    </div>
<!----------------------------------------------------------------->
    <div class="row" id="row">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img src="mabook.jpg" alt="Apple Macbook Pro Retina">
            <!--Accordion heading-->
            <div id="accordion">
            <h4>Macbook Pro Retina Display</h4>
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $999!</p>
                </div>
            </div>
        </div>
    </div>
<!----------------------------------------------------------------->
    <div class="row" id="row">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img src="superdrive.jpg" alt="Apple SurperDrive">
            <!--Accordion heading-->
            <div id="accordion">
            <h4>Apple SuperDrive</h4>
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $79!</p>
                </div>
            </div>
        </div>
    </div>
<!----------------------------------------------------------------->
    <div class="row" id="row">
        <!--<div class="col-sm-3">-->
            <!--Insert picture-->
            <img src="case1.jpg" alt="Laptop Case">
            <!--Accordion heading-->
            <div id="accordion">
            <h4>Laptop Case</h4>
                <!--Description and price-->
                <div>
                <p>Insert description for the product here</p>
                    <p>Starting at $39!</p>
                </div>
            </div>
        </div>
    </div>
<!----------------------------------------------------------------->
<script>
  $(function() {
    $( ".accordion" ).accordion();
  });

    $( ".row" ).mouseenter(function() {
        $(this).animate({ fontSize : 14 });
});

    $( ".row" ).mouseleave(function() {
        $(this).animate({ fontSize : 13 });
});
    </script>
</body>

CSS:

    img {
    width:300px;
    height:200px;
}
header{
    background-color: crimson;
    color:darkblue;
    padding-left: 0;/*why is this not working*/
    width:100%
}
body{
    width:80%;
    background-color: lightgray;
    font-size: 13;
    padding-left: 5%
}
#row{
    background-color: white;
    width:30%;
    padding-left: 5%;

}

多个元素不能具有相同的ID。那么它就不能识别，是吗

在这些手风琴和行上使用类选择器，否则它将只找到第一个元素。

多个元素不能具有相同的ID。那么它就不会识别，是吗

在这些手风琴和行上使用类选择器，否则它将只找到第一个。

ID必须是唯一的，因为您已经使用它添加了公共类行绑定事件。使用类选择器选择具有类的所有图元

$(".row").mouseenter(function() {
    $(this).animate({ fontSize : 14 });
});
$(".row").mouseleave(function() {
    $(this).animate({ fontSize : 13 });
});

也可以用普通类搭配手风琴，所以使用

<div class="accordion">

ID必须是唯一的，因为您已经使用它添加了公共类行绑定事件。使用类选择器选择具有类的所有图元

$(".row").mouseenter(function() {
    $(this).animate({ fontSize : 14 });
});
$(".row").mouseleave(function() {
    $(this).animate({ fontSize : 13 });
});

也可以用普通类搭配手风琴，所以使用

<div class="accordion">

元素ID必须是唯一的。改用类

<div class="accordion">...

等等。

元素ID必须是唯一的。改用类

<div class="accordion">...

等等。

原因是您正在将事件绑定到div id。您应该将事件绑定到类

<script>
  $(function() {
    $( ".accordion" ).accordion();
  });
  </script>

<script>
    $( ".row" ).mouseenter(function() {
        $(this).animate({ fontSize : 14 });
});
    </script>

<script>
    $( ".row" ).mouseleave(function() {
        $(this).animate({ fontSize : 13 });
});
    </script>

您需要添加相应的类。另外，考虑将所有JavaScript放置在单个脚本标签下。

< P>理由是，您是绑定事件到div ID的。您应该将事件绑定到类

<script>
  $(function() {
    $( ".accordion" ).accordion();
  });
  </script>

<script>
    $( ".row" ).mouseenter(function() {
        $(this).animate({ fontSize : 14 });
});
    </script>

<script>
    $( ".row" ).mouseleave(function() {
        $(this).animate({ fontSize : 13 });
});
    </script>

您需要添加相应的类。此外，考虑将所有JavaScript放置在CSS中的单脚本标记。

中，在Lead Loop::0之间放置一个空格，因为每个ID必须是唯一的，jQuery只抓取第一个。您应该为它们添加一个类，并引用该类。ids在文档中必须是唯一的。当Javascript停止工作时，10次中有9次是无效的DOM。确保标签的打开和关闭均匀，您有唯一的ID，等等。谢谢，我添加了这个空格，填充保持不变？在css中，在左填充和0之间留出一个空格，因为每个ID必须是唯一的，jquery只获取第一个ID。您应该为它们添加一个类，并引用该类。ids在文档中必须是唯一的。当Javascript停止工作时，10次中有9次是无效的DOM。确保您的标签打开和关闭均匀，您有唯一的ID等。谢谢，我添加了这个空间，填充保持不变？谢谢，这对手风琴功能以外的所有功能都有帮助。我将代码更改为，javascript更改为.accordion，但是accordion样式没有激活。有什么好主意吗？@hbteibet，对不起，伙计，没有主意不管怎样，你以前的代码帮了我的忙！谢谢你，除了手风琴功能外，这一切都很有用。我将代码更改为，javascript更改为.accordion，但是accordion样式没有激活。有什么好主意吗？@hbteibet，对不起，伙计，没有主意不管怎样，你以前的代码帮了我的忙！