使用幻灯片动画展开和折叠

我打算使用滑动动画创建可点击的文本。目前，我有这样的：使用幻灯片动画展开和折叠

的JavaScript：（expand-collapse.js）

$(document).ready(function() { 
    $(".content").hide(); 

    $(".heading").click(function() { 
     var header = $(this); 

     header.next(".content").slideToggle(250); 
    }); 
});

HTML：

<head> 
    <style> 
     .heading { 
      cursor: pointer; 
      font-weight: bold; 
     } 
    </style> 

    <script src="js/jquery-1.11.1.min.js"></script> 
    <script src="js/expand-collapse.js"></script> 
</head> 

<body> 
    <div class="heading">VIEW SEAT MAP (EXPAND/COLLAPSE)</div> 
    <img class="content" src="images/seatmap.png" width="500" height="300" alt="seatmap"> 
</body>

输出：
enter image description here

所以发R，它扩大和崩溃，因为它应该，但不是有写着一个静态文本

查看座位图（展开/折叠）

所有的时间，我更喜欢说

VIEW SEAT MAP（展开）
VIEW SEAT MAP（塌陷）

因此，只有EXPAND和COLLAPSE文本可点击，如<a href>（与整个标题div相对）。我对JS很新。

来源

2014-11-04 silver

添加a到标题：

<div class="heading">VIEW SEAT MAP <a class="slide-toggle">EXPAND</a></div>

处理新a的点击事件，并相应设置文本：

$(document).ready(function() { 
    $(".content").hide(); 

    $(".slide-toggle").click(function() { 

     $(this).parent().next(".content").slideToggle(250); 

     if($(this).text() == 'EXPAND') 
     { 
      $(this).text('COLLAPSE'); 
     } 
     else 
     { 
      $(this).text('EXPAND'); 
     } 
    }); 
});

注：我已经把这个非常简单的为您和只需将这些更改合并到您已有的内容中即可。可能有更好的总体方法和一些句法糖（例如，简写为if语句），但我现在保持简单。

来源

2014-11-04 14:52:21

嗨DeeMac主席先生，我已经全部换成相应的代码与您建议的答案，图像不会展开任何更多。 – silver 2014-11-04 15:11:02

道歉，请再试一次（我编辑了代码） – 2014-11-04 15:14:06

还没有生效先生，几次刷新我的HTML页面。 – silver 2014-11-04 15:17:41

这只是为了向我展示在DeeMac的回答（标记为接受）的帮助下我如何进行最终输出。

的JavaScript：（expand-collapse.js）

$(document).ready(function() { 
    $(".content").hide(); 

    $(".slide-toggle").click(function() { 
     $(this).parent().next(".content").slideToggle(250); 
     $(this).text() == 'EXPAND' ? $(this).text('COLLAPSE') : $(this).text('EXPAND'); 
    }); 
});

HTML：

<head> 
    <style> 
     .slide-toggle { 
      color: blue; 
      cursor: pointer;    
      text-decoration: underline; 
     } 
    </style> 

    <script src="js/jquery-1.11.1.min.js"></script> 
    <script src="js/expand-collapse.js"></script> 
</head> 

<body> 
    <strong>VIEW SEAT MAP (<span class="slide-toggle">EXPAND</span>)</strong> 
    <img class="content" src="images/seatmap.png" width="500" height="300" alt="seatmap"> 
</body>

来源

2014-11-06 02:36:36 silver

使用幻灯片动画展开和折叠

回答

相关问题