引導旅遊 - 閱讀更多

Question

我想使用更多的信息（jquery顯示隱藏）選項裏面的引導帶遊覽元素標籤。不過，我注意到jquery腳本不適用於bootstrap遊覽中的元素。這是我的代碼。

$(document).ready(function() { 

    $(".popover-content .message").css('display', 'none'); 
    $("span.readmore").click(function(){ 
     $(".message").css('display' , 'block'); 
     $(this).css('display', 'none'); 
    }); 

    var tour = new Tour({ 
     template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><nav class='popover-navigation'><div class='btn-group'><button class='btn btn-primary' data-role='prev'>Prev</button><button class='btn btn-primary' data-role='next'>Next</button></div><button class='btn btn-primary btn-end' data-role='end'>End tour</button></nav></div>" 
    }); 

    // Add your steps. Not too many, you don't really want to get your users sleepy 
    tour.addSteps([ 
    { 
     element: "#manage-my-account", // string (jQuery selector) - html element next to which the step popover should be shown 
     title: "Title of my step1", // string - title of the popover 
     content: "<div>Styles make the formatting job much easier and more efficient.</div><span class='readmore'>Read More...</span><div class='message'>To give an attractive look to web sites, styles are heavily used." + 
    "JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn, but it's easy to implement too. A person must have a" + 
    "good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project that provides a wide range of features with cross-platform compatibility. </div>" // string - content of the popover 

    }, 

    { 
     element: "#memberhome-app-tile-4", 
     title: "Title of my step6", 
     content: "Content of my step6" 
    } 
    ]); 

    // Initialize the tour 
    tour.init(); 

    // Start the tour 
    tour.start(); 

}); 

Answer 1

寫有onShown選項的代碼如下：

tour.addSteps([ 
{ 
    element: "#manage-my-account", // string (jQuery selector) - html element next to which the step popover should be shown 
    title: "Title of my step1", // string - title of the popover 
    content: "<div>Styles make the formatting job much easier and more efficient.</div><span class='readmore'>Read More...</span><div class='message'>To give an attractive look to web sites, styles are heavily used." + 
      "JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn, but it's easy to implement too. A person must have a" + 
      "good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project that provides a wide range of features with cross-platform compatibility. </div>", // string - content of the popover 
    onShown : function(){ 
     $(".popover-content .message").css('display', 'none'); 
     $("span.readmore").click(function(){ 
      $(".message").css('display' , 'block'); 
      $(this).css('display', 'none'); 
     }); 
    } 
}, 

您可以自定義寫在onShown功能再次隱藏代碼，這個塊。