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

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

场景：我正在使用CodeIgniter制作基于事件的日历。它在桌面/平板大小的窗口上运行很好，我用ZURB制作了一个使用基础2的移动版本。看起来不错，但我面临一个问题

问题：在移动版本中，当日历生成时，我需要在移动版本中隐藏

s（在桌面版本中显示事件）。然后，我需要能够在选择/单击

日期列表

s（日历上的日期编号）时调用

s等

下面是calendar类如何生成日期及其事件：

<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.

事件1
事件2
事件3
事件4
事件5

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

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

{cal\u cell\u content}
{day}
{content}
{/cal_单元内容}
{cal_cell_content_today}
{day}
{content}
{/cal_单元内容_今天}

注意：这是您需要处理的问题

问题：当日历类生成时，我需要使用什么方法（例如CSS/JavaScript/PHP/等）来正确隐藏

s，并在

日列表

中选择/单击时调用它们

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

基金会移动。CSS（没有基础。我可以找到CSS）设置<代码>显示：块！重要信息使用

手机隐藏

类。ul可能实际上没有隐藏，但溢出到页面的某个部分，而该部分在默认可视区域中不可见（这就是调整大小时显示的原因）

除此之外，你想要什么还不清楚。你在问题的早期说明它起作用，然后说明它不起作用。。。和往常一样，看到更多的代码会很有帮助

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

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

你可以通过

document.getElementById('ulID').href

会让这些东西变得更容易；也许值得研究一下

---

编辑：

所以这仍然让我困惑：你的ul没有手机隐藏类；这是基金会设置的吗？< /P> 此外，您是否试图隐藏事件，并在单击日期时显示它们？e、 g

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

（函数（$）{
var isMobile=（/iphone | ipad | ipod | android | blackberry | mini | windows\sce | palm/i.test（navigator.userAgent.toLowerCase（））；
if（isMobile）{
$（'.event_list'）.hide（）；//设置display:none；在所有.event_list
元素上
//将单击事件附加到图元
$（'.day_listing'）。单击（函数（）{
var$eventList=$（this.sibling（'.event_list'）；
$（'.event_list'）.hide（）；//再次隐藏所有可能显示的内容，然后再打开所选内容
$eventList.show（）；//设置显示：单击的同级
上的块
});
}
})（jQuery）；

你确定是吗。在手机上隐藏{display:！important；}不是。在手机上隐藏{display:none；}？我更新了我的问题，使其更清晰/更容易理解。我希望这有帮助！因此，在手机上，您需要隐藏

，直到触摸（单击）了

#

？然后在出现这种情况时显示

？更新上面的答案。干杯。我已经更新了我的问题，让它更清楚/更容易理解。非常感谢您提供jQuery代码片段！我会测试它，我会让你知道结果如何！好的，我再次更新了代码以添加对移动浏览器的检查。如果是移动设备，它将隐藏ul，并在单击日期时显示或隐藏它们。在这行代码上接收此错误（JavaScript:error undefined TypeError:“undefined”不是函数

var$eventList=$（this）.sibling（'.event_list'）有什么想法吗？
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(); 
    }
})

(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);