Jquery Mobile Accordion无法正常工作

Question

这是我的代码：

<div class="ui-content">
<div data-role="collapsible-set">
       <?php
        $url="http://tvstartup.biz/mng-channel/vpanel/api/vodcategories.php?user=username&pass=password";
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
        $categoryResponse = curl_exec($ch);
        $categoryResults=json_decode($categoryResponse);
        //var_dump($categoryResponse); die();
    ?>
    <?php if(count($categoryResults->categories)>0):?>
    <?php foreach($categoryResults->categories as $category): ?>
    <div data-role="collapsible">
            <h3><?php echo $category->title; ?></h3>
            <ul class="videos">
    <?php 
    $url="http://tvstartup.biz/mng-channel/vpanel/api/vodplaylist.php?user=username&pass=password&id=" . $category->id;     
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); 
    $response = curl_exec($ch); 
    $results=json_decode($response);        
    if(count($results->videos)>0):?>
    <?php foreach($results->videos as $video):?>
        <li>
            <div class="thumb">
            <img alt="videos" src="<?php echo $video->image_1;?>" width="90%">
            <a href="">Watch</a>
            </div>
            <strong>
            <a class="vodTitle" href=""><?php echo $video->title;?></a>
            </strong><br />
        </li>

    <?php endforeach;?>
    <?php else:?>
            <h2>No videos found</h2>
        <?php endif;?>
    </ul>
           </div>
    <?php endforeach;?>
    <?php else:?>
            <h2>Nothing Found</h2>
        <?php endif;?>
</div>

CSS：

.ui-collapsible-content {
    height: fit-content !important;
}
ul.videos li {
    height: 80px;
    width: 90px;
    display: block;
    float: left;
    padding: 5px;
}

ul.videos li div.thumb {
    position: relative;
}

ul.videos li div.thumb a {
    position: absolute;
    right: 35px;
    top: 40px;
    height: 15px;
    background: #6D6D6D;
    padding: 10px;
    border-radius: 10px 0px;
    text-decoration: none;
    color: white;
}

#vod > div.ui-panel-wrapper > div.ui-content > ul > li > strong {
    display: none;   
}

我的问题是这是一张图片：

正如您在图像中看到的那样，vodcat2按钮位于右侧，当我检查元素时，它看起来好像vodcat2按钮和内容在vodcat 1中，而vodcat1 / vodcat2内容div甚至不适合虽然我有一些css要改变它仍然不起作用，我不确定我是否在正确的位置或什么。

谢谢