如何從.show（）更改爲.reveal（）？

我試圖將我的代碼中的.show()更改爲.reveal()，我似乎無法正確執行此操作。未產生任何錯誤，因爲沒有什麼是當我選擇day_listing_mobile<span>小號如何從.show（）更改爲.reveal（）？

這是我的JavaScript代碼發生：

(function($) { 
    var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); 
    if (isMobile) { 
     $('.event_list').hide(); // setting display:none; on all .event_list <ul> elements 

     // attach click event to the <span class="day_listing"> elements 
     $('.day_listing_mobile').click(function() { 
      var $eventList = $(this).sibling('.event_list'); 

      $('.event_list').hide(); // again hide all possibly shown ones before opening the selected one 

      $eventList.show(); // setting display:block on sibling <ul> of clicked <span> 

      $('#myMobileModal').reveal(); 
     }); 
    } 

})(jQuery);

這裏就是我躲在並希望揭示：

{cal_cell_content}<span class="day_listing_mobile">{day}</span><div id="myMobileModal" class="reveal-modal"><ul class="event_list">{content}</ul></div>{/cal_cell_content} 
      {cal_cell_content_today}<span class="day_listing_mobile" id="today_listing">{day}</span><div id="myMobileModal" class="reveal-modal"><ul class="event_list">{content}</ul></div>{/cal_cell_content_today}

上面的代碼是使用CodeIgniter的Calendar類生成<ul>，我是.hide()在移動設備上，並且我最終想要.reveal()而不是.show()。

這裏是如何工作的.reveal()：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#myButton').click(function(e) { 
      e.preventDefault(); 
     $('#myModal').reveal(); 
    }); 
}); 
</script>

（more information on Reveal by Zurb）

免責聲明：我是新來的網絡發展，在任何吮吸的JavaScript相關。

來源

2011-12-21 imlouisrussell

那你試試，你看到了什麼錯誤？ – Mathletics 2011-12-21 17:57:37

你可以發佈你的標記嗎？我不確定你想要透露什麼（） – jbabey 2011-12-21 17:57:50

問題已更新，以便更清晰。 – imlouisrussell 2011-12-22 10:18:01

HTML

{cal_cell_content} 
<span class="day_listing_mobile">{day}</span> 
<div id="myMobileModal" class="reveal-modal"> 
    <ul class="event_list">{content}</ul> 
</div> 
<a id="myButton" data-reveal-id="myModal" href="javascript://">myButton</a> 
{/cal_cell_content}

$(document).ready(function() { 
    $('.day_listing_mobile').click(function(e) { 
     var $eventList = $(this).siblings('.event_list'); 
     $('.event_list').hide(); 
     $eventList.show(); 
     $('#myMobileModal').reveal(); 
    }); 
});

CSS

//從reveal.css（確保包括它）

.reveal-modal { 
    visibility: hidden; 
    top: 100px; 
    left: 50%; 
    margin-left: -300px; 
    width: 520px; 
    background: #eee url(modal-gloss.png) no-repeat -200px -80px; 
    position: absolute; 
    z-index: 101; 
    padding: 30px 40px 34px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    box-shadow: 0 0 10px rgba(0,0,0,.4); 
    }

小提琴

http://jsfiddle.net/c4urself/EUPYT/

來源

2011-12-22 10:34:23 c4urself

如何從.show（）更改爲.reveal（）？

回答

相關問題