동적으로 추가 접을 수있는 요소

가능한 중복 : 나는 모바일 웹 사이트에 대한 동적 콘텐츠를 만들려고 해요하지만 제대로 표시 접을 수있는 요소에 문제가 있어요
Dynamically adding collapsible elements 동적으로 추가 접을 수있는 요소

. 내가 여기에 게시 이와 유사한 질문을 쳐다 보면서 나는 성공적으로 다음과 같은 수정 사항을 적용 할 수 없습니다 :

$('div[data-role=collapsible]').collapsible();

는 IS 다음 내 자바 스크립트 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>Tour Booking Made Easy</title> 
    <script src="tourinfo.js" type="text/javascript"></script> 
    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> 
    <script src="jquery-1.6.2.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> 


</head> 
<body onload="loadContent()"> 
    <div data-role="page"> 
<div id="company" data-role="header" data-theme="b"></div> 

<div id="company-info" data-role="content" data-theme="b"></div> 

<div data-role="collapsible" data-theme="c"> 
      <h2 id="package-name">test</h2> 
      <div id="package"> 
      <div id="stops"></div> 
     </div> 
    </div> 
</body> 
</html>

function loadContent() { 

    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "company.xml", 
      dataType: "xml", 
      success: parseCompany 
     }); 
    }); 

    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "italy.xml", 
      dataType: "xml", 
      success: parseTour 
     }); 
    }); 
} 

function parseCompany(xml) { 
    $(xml).find("company").each(function() { 
     $("#company").html("<h1>" + $(this).find("name").text() + "</h1>"); 

     var link = $(this).find("contact-page").text(); 
     var message = "<p>Telephone: " + $(this).find("booking-phone").text() + "</p>"; 
     message += "<p><a href=" + link + ">Company Website</a></p>"; 

     $("#company-info").html(message); 
    }); 
} 

function parseTour(xml) { 
    $(xml).find("package").each(function() { 
     //var message = "<div data-role='collapsible' data-collapsed='true' data-theme='c'>"; 
     $("#package-name").html(" ").append($(this).attr("title")); 
     var message = "<p>Basecost: $" + $(this).attr("baseCost") + "</p>"; 
     message += "<p>Length: " + $(this).attr("length") + " days </p></div>"; 
     $("#package").html(message); 
    }); 
}

다음은 HTML입니다

축소 가능한 지형지 물이 기능을 수행하지만 꼭 그래야하는 것처럼 보이지 않습니다. 또한 javascript에서 접을 수있는 div 태그를 HTML의 빈 div 태그에 삽입하려고 시도했지만 내용이 전혀 표시되지 않습니다. 어떤 도움이라도 대단히 감사하겠습니다. 고맙습니다.

-manav

출처

2011-08-19 ManaFive

속성 선택자와 관련하여 따옴표가 필요합니다.

$('div[data-role="collapsible"]').collapsible();

출처

2011-08-19 22:10:31 Dennis

동적으로 추가 접을 수있는 요소

답변

관련 문제