-5

[この質問を最初に投稿した方法についてお詫びします!]

私はポートフォリオ タイプの Web サイトを作成しており、「最近の作業」セクションの項目をクリックしたときに表示されるような効果が必要です: http://themes.zenthemes.net/cleanr/

基本的に、これは私が達成しようとしている機能です:

  1. アイテムのリンクをクリックします (複数のアイテムには異なるコンテンツへのリンクがあります)
  2. クリックすると、div がアニメーション化され、新しいコンテンツが (事前に定義された場所で) 開きます
  3. 開く div には閉じるボタンがあります。閉じるボタンをクリックすると、DIV がアニメーション化して閉じます。
  4. 一度に表示できるのは、新しいコンテンツを含むこれらの div の 1 つだけです。したがって、2 番目のリンクをクリックすると、最初の div がすぐに閉じて、2 番目の div が開くはずです。

私は以下のコードで解決策にかなり近づいていますが、1 つの大きな不具合が発生しています...

DIV 1 を開いてから DIV 2 を開くと、DIV 1 を折りたたむ/非表示にすることが認識されます。これは完璧です (したがって、一度に 1 つの div のみが表示されます)。

ただし、DIV 1 を開いて DIV 1 の閉じる (赤い X) ボタンをクリックすると、閉じ始めますが、閉じるとすぐに再び開きます。閉じて閉じたままにしたいだけです（リンクが再度クリックされるまで）。

いろいろ試してみましたが、うまく再生できません。

ここで実際にこれを見ることができます: http://jsfiddle.net/tdHTN/1/

(最初の「実行」ボタンをクリックしてから、表示される赤い「x」をクリックして問題を確認してください。)

ここに私のCSSがあります:

#slidingDiv, #slidingDiv_2{
height:200px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
display:none;}

ここに私のHTMLがあります：

<div id="slidingDiv" class="toggleDiv" style="clear:both;">
    This is my content for block ONE (1). Isn't it so super interesting?
    <a href="#" class="show_hide" rel="#slidingDiv"><img src="https://cdn2.iconfinder.com/data/icons/officeicons/PNG/48/Close.png" width="48" height="48" alt="close" /></a>


<div id="slidingDiv_2" class="toggleDiv" style="clear:both;">
    This is some super exciting content that I will fill in later. This is block TWO (2)
    <a href="#" class="show_hide" rel="#slidingDiv_2"><img src="https://cdn2.iconfinder.com/data/icons/officeicons/PNG/48/Close.png" width="48" height="48" alt="close" /></a>


<a href="#" class="show_hide" rel="#slidingDiv"><img src="https://www.bcidaho.com/_images/go-button-trans.gif" alt="Play" width="42" height="41" border="0" align="left" /></a>
<a href="#" class="show_hide" rel="#slidingDiv_2"><img src="https://www.bcidaho.com/_images/go-button-trans.gif" alt="Play" width="42" height="41" border="0" align="left" /></a>

これが私のJSです：

(function ($) {
$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide'

    };
    var options = $.extend(defaults, options);

    $(this).click(function () { 

         $('.toggleDiv').slideUp(options.speed, options.easing);    
         // this var stores which button you've clicked
         var toggleClick = $(this);
         // this reads the rel attribute of the button to determine which div id to toggle
         var toggleDiv = $(this).attr('rel');
         // here we toggle show/hide the correct div at the right speed and using which easing effect
         $(toggleDiv).slideToggle(options.speed, options.easing, function() {
         // this only fires once the animation is completed
         if(options.changeText==1){
         $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
         }
});

      return false;

});

};
})(jQuery);


$(document).ready(function(){

$('.show_hide').showHide({           
    speed: 1000,  // speed you want the toggle to happen    
    easing: ''
}); 


});

私が達成しようとしているもう 1 つのこと (可能であれば) は、DIV アニメーションを下にスライドさせるのではなく、上にスライドさせることです。「slideUp」を「slideDown」に変更してみましたが、うまくいきませんでした。

ご協力いただきありがとうございます。

[注: スクリプト ソース: http://papermashup.com/jquery-show-hide-plugin/]

4

1 に答える 1

0

多くの試行錯誤の後、ようやくこれを適切に機能させる方法を見つけました。

他の人が同じ問題を抱えている場合は、すぐに解決策にジャンプできるように、ここに必ず含めたいと思いました.

更新されたJSは次のとおりです。

(function ($) {
$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide'

    };
    var options = $.extend(defaults, options);

    $(this).click(function () { 

         $('.toggleDiv').slideUp(options.speed, options.easing);    
         // this var stores which button you've clicked
         var toggleClick = $(this);
         // this reads the rel attribute of the button to determine which div id to toggle
         var toggleDiv = $(this).attr('rel');
         // here we toggle show/hide the correct div at the right speed and using which easing effect
         $(toggleDiv).is(':visible') ? $('.toggleDiv').slideUp(options.speed, options.easing) : 
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
         // this only fires once the animation is completed
         if(options.changeText==1){
         $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
         }
          });

      return false;

    });

};
})(jQuery);

DIV (表示および非表示) は次のようになります。

<div id="slidingDiv" class="toggleDiv" style="clear:both;display: none;">
    This is my content for block ONE (1). Isn't it so super interesting?
    <a href="#" class="show_hide" rel="#slidingDiv"><img src="https://cdn2.iconfinder.com/data/icons/officeicons/PNG/48/Close.png" width="48" height="48" alt="close" /></a>


<div id="slidingDiv_2" class="toggleDiv" style="clear:both; display: none;">
    This is some super exciting content that I will fill in later. This is block TWO (2)
    <a href="#" class="show_hide" rel="#slidingDiv_2"><img src="https://cdn2.iconfinder.com/data/icons/officeicons/PNG/48/Close.png" width="48" height="48" alt="close" /></a>

リンクは私の元の質問と同じです。

于 2013-09-16T01:03:57.330 に答える