Question

我正在尝试将代码中的.show()更改为.reveal()，而我似乎无法正确地执行此操作。没有错误产生，因为当我选择day_listing_mobile <span> s

时，没有发生任何错误

这是我的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()而不是{{1} }}

以下是.show()的工作方式：

.reveal()

（more information on Reveal by Zurb）

免责声明：我是网络开发的新手，对任何与JavaScript相关的东西感到厌烦。

Answer 1

<强> 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}

<强> JS

$(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/

如何从.show（）更改为.reveal（）？

1 个答案: