Question

免责声明：我是网络开发的新手。

场景：我正在使用CodeIgniter制作基于事件的日历。它在桌面/平板电脑大小的窗口上运行良好，我使用Zurb的Foundation 2.0制作了移动版本。它看起来很棒，但我遇到了一个问题。

问题：在移动版中，当日历生成时，我需要隐藏移动版本中的<ul>（显示桌面版本中的事件）。然后，当<ul> s（日历上的日期编号）被选中/点击/等时，我需要能够调用day_listing。

以下是日历类如何生成日期及其事件：

<td>
   <span class="day_listing">7</span>
      <ul class="event_list">
         <li class="event_type" id="26">Event 1</li>
         <li class="event_type" id="27">Event 2</li>
         <li class="event_type" id="28">Event 3</li>
         <li class="event_type" id="29">Event 4</li>
         <li class="event_type" id="30">Event 5</li>
      </ul>
</td>

以下是我尝试使用的代码：

{cal_cell_content}
   <span class="day_listing">{day}</span><ul class="event_list">{content}</ul>
{/cal_cell_content}

{cal_cell_content_today}
   <span class="today_day_listing">{day}</span><ul class="event_list">{content}</ul>
{/cal_cell_content_today}

注意：这是需要使用的。

问题：我需要使用哪些方法（例如CSS / JavaScript / PHP /等）在日历类生成时正确隐藏<ul>，以及在选择/点击/等时调用它们。在day_listing s？

非常感谢您的帮助！以下是我正在使用的资源，如果您在了解我在说什么时遇到问题，可以参考：

Answer 1

基础mobile.css（我找不到基础.css）用display:block!important类设置hide-on-phones。 ul可能实际上不是隐藏的，而是溢出到页面的一部分，这部分在默认的可视区域中是不可见的（这就是调整大小时出现的原因）。

除此之外，目前还不清楚你想要什么。你声明它在问题的早期工作，然后声明它不起作用......一如既往，看到更多的代码会有所帮助。

要正确隐藏ul，请使用js：

document.getElementById('ulID').style.display="none"

您可以通过

访问其“网址”

document.getElementById('ulID').href

jQuery会让这些东西变得更容易;可能值得研究。

编辑：

所以这仍然令我困惑：你的ul没有hide-on-phones类;那是由基金会设定的吗？

另外，您是否试图隐藏事件并在点击日期时显示它们？例如

<td>
   <span class="day_listing">7</span>
      <ul class="event_list">
         <li class="event_type" id="26">Event 1</li>
         <li class="event_type" id="27">Event 2</li>
         <li class="event_type" id="28">Event 3</li>
         <li class="event_type" id="29">Event 4</li>
         <li class="event_type" id="30">Event 5</li>
      </ul>
</td>

默认情况下隐藏事件，然后点击它们显示的“7”？如果这确实是你想要的，那就是使用由calendar生成的现有标记的jQuery解决方案的一个例子：

（顺便说一句，您可能希望使用noConflict，因此jQuery不会干扰您的其他库）

function itsMobile(){
    jQuery('.event_list').hide();
    jQuery('.day_listing').click(function(){
        jQuery(this).next('ul').toggle();
    });
}

jQuery(document).ready(function(){
    if(navigator.userAgent.match(/Android/i) ||
       navigator.userAgent.match(/webOS/i) ||
       navigator.userAgent.match(/iPhone/i) ||
       navigator.userAgent.match(/iPod/i)){
           itsMobile(); 
    }
})

Answer 2

(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').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>
        });
    }

})(jQuery);

使用CSS / JS / PHP访问CodeIgniter中的隐藏无序列表

2 个答案: