2

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

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

问题：在移动版本中，当日历生成时，我需要在移动版本中隐藏<ul>s（在桌面版本中显示事件）。然后我需要能够在选择/单击/等 s（日历上的日期数字）<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>生成日历类时正确隐藏 s，并在选择/单击/等时调用它们。在day_listings?

非常感谢您的所有帮助！以下是我正在使用的资源，如果您不知道我在说什么，您可以参考：

4

2 回答 2

1

Foundation mobile.css（我找不到foundation.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”时它们会显示？如果这确实是您想要的，使用日历生成的现有标记的 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(); 
    }
})
于 2011-12-15T14:52:03.817 回答
1 
(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);
于 2011-12-16T18:22:36.867 回答