Question

我正在使用jQuery，之前我还没有使用它，所以我是一个新手。

我试图在菜单中制作幻灯片，然后我找到了代码。但问题是，当我将其插入Sublime Text中的现有代码时。出于某种原因，javascript无效。

＆＃13;

$(".myButton").click(function() {
  var effect = 'slide';
  var options = {
    direction: $('.mySelect').val()
  };
  var duration = 500;
  $('#myDiv').toggle(effect, options, duration);
});

＆＃13;

.myButton {
  font-size: 1em;
  cursor: pointer;
  font-weight: bold;
}

.mySelect {
  padding: .2em 0;
  font-size: 1em;
  display: none;
}

#myDiv {
  color: #fff;
  background-color: pink;
  border: 2px solid #000;
  display: none;
  text-align: justify;
  padding-left: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myButton">
  run effect
</div>
<select class="mySelect">
   <option value="left">Left</option>
</select>
<div id="myDiv">
  <ul>
    <li><a href="epi.hmtl"> episoder </a></li>
    <li> - </li>
    <li><a href="kar.html"> karakterer </a></li>
    <li> - </li>
    <li><a href="about.html"> medvirkende </a></li>
    <li> - </li>
    <li><a href="prod.html"> produksjon </a></li>
  </ul>
</div>

＆＃13;

我已设置.mySelect { display: none; }，因为我不希望用户能够选择从哪一侧进入。

Answer 1

您需要确保在加载DOM时运行jQuery代码。为此，您可以将<script>块放在</body>标记之前。或者，您可以将它放在<head>中，并将您的JS代码包装在document.ready事件处理程序中，如下所示：

$(function() {
  $(".myButton").click(function() {
    var effect = 'slide';
    var options = {
      direction: $('.mySelect').val()
    };
    var duration = 500;
    $('#myDiv').toggle(effect, options, duration);
  });
});

麻烦javascript并使其与我现有的代码一起工作

1 个答案: