使用幻燈片動畫展開和摺疊

我打算使用滑動動畫創建可點擊的文本。目前，我有這樣的：使用幻燈片動畫展開和摺疊

的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

使用幻燈片動畫展開和摺疊

回答

相關問題