-1

我资助了一个完美运行的切换代码，但我想添加一个速度效果以在打开和关闭时减慢它的速度。我确实尝试在其上插入此代码<p onclick="javascript:setTimeout(toggle(), 3000);">OPEN</p>，<h1>OPEN</h1>但没有成功。

我有一个 joomla 网站，一些插件使用 jquery。似乎 Jquery 可以用.toggle( [duration ] [, complete ] )我已经看到 JQ 是一个“Javascript 库”的东西来解决这个问题，所以它应该与下面的代码一起工作，但不知道我应该如何插入它。我不知道“简单地”在下面的代码中添加 jquery 代码是否可行，或者我是否应该在 FTP 网站中添加一些 XX.js 文件（正如我在一些教程中看到的那样）。我迷路了...

<script type="text/javascript">
    // <![CDATA[
    function toggle(id, link) {
        var elem = document.getElementById(id);
        var text = document.getElementById(link);
        if (elem.style.display != "none") {
            elem.style.display = "none";
            text.innerHTML = "show";
        } else {
            elem.style.display = "block";
            text.innerHTML = "hide";
        }
    }
    // ]]>

</script>
<ul>
    <li><a id="displayText" href="javascript:toggle('toggleText', 'displayText');">show</a>
        <div id="toggleText" style="display: none;">
            <h1>OPEN</h1>
        </div></li>
    <li><a id="toggler2" href="javascript:toggle('secondText', 'toggler2');">show</a>
        <div id="secondText" style="display: none;">
            <h1>OPEN</h1>
        </div></li>

</ul>

谢谢！

4

2 回答 2

2

由于您使用的是 jquery，因此请对标记进行一些小改动以方便使用

<ul id="container">
  <li>
    <a class="opener">show</a>
    <div style="display: none;">
      <h1>OPEN</h1>
    </div>
  </li>

  <li>
    <a class="opener">show</a>
    <div style="display: none;">
      <h1>OPEN</h1>
    </div>
  </li>
</ul>

然后

$(function(){
  $('#container').on('click', 'a.opener', function(){
    $(this).next().toggle('slow')
  });
});

演示：小提琴

于 2013-04-05T16:06:18.393 回答
0

对于 joomla：

1/ 在标签后面添加 index.php：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript"></script>

2/ 在 ftp 中创建一个名为 app.js 的文件并在其中写入：

var $j = jQuery.noConflict();
$(function(){
  $('#container').on('click', 'a.opener', function(){
    $(this).next().toggle('slow')
  });
});

3/文章源码中：

<ul id="container">
  <li>
    <a class="opener">show</a>
    <div style="display: none;">
      <h1>OPEN</h1>
    </div>
  </li>

  <li>
    <a class="opener">show</a>
    <div style="display: none;">
      <h1>OPEN</h1>
    </div>
  </li>
</ul>
于 2013-04-12T13:06:53.930 回答