Common layout problem in collapsible-set collapsible listview in jquery.mobile_html/css_WEB-ITnose

A recent project used jquery.mobile to create a simple display on a mobile phone. I only knew about this framework before, but never played with it.

Especially in terms of event binding, compared with the desktop system, the browser is a lot of troubles and it doesn’t work.

As shown below, when working on a backend system, the left side is usually filled with modules and subordinate menu items that can be expanded and folded.

My problem is stuck in the accumulated evaluation. In order to reuse the page, an iframe is embedded in the accumulated evaluation to display comments.

The first threshold

Students who have experienced mobile WEB development should know that when there is too much content in the iframe under the IOS browser, the scroll bar will not appear and the content will seem to be cut off.

After checking the information, I finally got it. After all, the mobile phone screen is small. When there are many comments, it is impossible to have a row of page turning buttons like the page on the computer browser. This experience is really bad.

Nowadays, rolling loading is generally used. Write the DEMO and run it on the computer first. It works! I changed my mobile phone and tried it with an Android phone first. It works. I think it will work.

Switching to iPhone only solved the problem of the scroll bar, but my scrolling loading is still there. I swiped it repeatedly and still got no response, which made my heart go cold. I want to say something weird here. It is allowed in QQ and WeChat. It is really weird.

There will be no results if you continue to waste it like this, so let’s find another way. The first thought was to do this on a separate page. So we encountered the second threshold.

<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">                    <ul data-role="listview">                        <li><a id="pjList" href="xxx" class="ui-btn-text"  >累计评价</a></li>                    </ul>                </div>

The above corresponds to the cumulative evaluation part. After clicking, the page style is completely messed up and the js events are not executed. Looking at the code with f12, except for the html elements in the body, the part in the head, and the js at the bottom of the page, all are gone.

Are you going to be so stupid? I asked my colleagues if they had encountered such a problem. They said that it would be fine if they added rel="external", but it didn't really work. So the code becomes as follows:

<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">                    <ul data-role="listview">                        <li><a id="pjList" href="xxx" class="ui-btn-text" rel="external">累计评价</a></li>                    </ul>                </div>

Note: rel='external' is similar to target=''_blank'', meaning in a new page Open

The third threshold, which is the problem mentioned in the title (the head picture is the final effect)

collapsible listview These two partners are incompatible with each other, and they cannot reconcile each other. It produced a better layout effect. I added an empty collapsible while tinkering and it worked.

Finally got them together. The collapsible icon defaults to , and the listview item is a right arrow to unify the icons. By default, the cumulative evaluation is not as shown in the picture above.

87690f3f920a7869416636e8c0bd601a

This problem has been cleared, complete page As follows:

                                            
        
            
                
                    
医院介绍
                    
                
                
                    
套餐相关信息
                    
                
                
                    
使用须知
                    
                
                
                    
查看地图
                    
                
                
                
                <div data-role="content" style="border: solid #CCC; border-width: 0 1px;">                    <ul data-role="listview">                        <li><a id="pjList" href="xxx" class="ui-btn-text" rel="external">累计评价</a></li>                    </ul>                </div>