使用带有JQuery的按钮来折叠div

Question

我在jsfiddle上找到了这个代码，我试图让它在我的页面上运行。

这是链接：

http://jsfiddle.net/AfCdg/2/

以下是JSFiddle上的代码：

<div data-role="page">

     <div data-role="header" id="header">
         <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
         <h1>Logo</h1>
         <a href="#" data-role="button" data-icon="search" id="searchButton">Buscar</a>
     </div>

     <div data-role="content">
        <div data-role="collapsible" id="searchForm" data-collapsed="true">
            <h3>tester</h3>
            <p>This is some text, cool</p>
        </div><!-- end searchform-->
     </div><!-- end content-->
</div><!-- end page-->

$(document).ready(function(){

      $('#searchButton').live('click', function(event, ui) {
        $("#searchForm").toggle();
      });

});

这是我的代码：

<div data-role="header" id="header"><a href="#" data-role="button" id="CollapseButton">Refund Policy</a></div>

<div data-role="content">
    <div data-role="collapsible" id="refund" data-collapsed="true">

和我的javascript：

$(document).ready(function () {

    $('#CollapseButton').live('click', function (event, ui) {
        $("#refund").toggle();

        setTimeout(function () {
            var divPosition = $('#refund').offset();

            $('html, body').animate({ scrollTop: divPosition.top }, "fast");
        }, 200);
    });

});

当我点击一个href按钮时，div当前没有开始折叠，也没有切换。我错过了什么？

以下是我在Chrome控制台中收到的唯一错误，看起来与我无关。

Answer 1

您的按钮ID是searchButton

将您的代码更改为新的ID，或者将它们与您的html匹配：

$(document).ready(function () {

$('#searchButton').live('click', function (event, ui) {
    $("#refund").toggle();

    setTimeout(function () {
        var divPosition = $('#refund').offset();

        $('html, body').animate({ scrollTop: divPosition.top }, "fast");
    }, 200);
});

}）;

 <div data-role="header" id="header">
     <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
     <h1>Logo</h1>
     <a href="#" data-role="button" data-icon="search" id="searchButton">Buscar</a>
 </div>

Answer 2

尝试将$('#searchButton').live('click', ...更改为$('#searchButton').on('click', ...

https://jsfiddle.net/o3mk90xq/

另外，请注意检查元素首次加载时是否隐藏，以便最初隐藏它。

if (!$("#refund").is(':hidden')) {
    $("#refund").hide();
}