0

これは簡単な修正だと思いますが、理解できないようです。

クリックすると、非表示の div が表示される 3 つのセルを含むテーブルがあります。ただし、div が表示されると、その周りのセルが押し出されます。div が表示されるが、セルのサイズに制限されず、その周りの他のセルに影響を与えない方法を探しています。

これを表にまとめるよりも良い方法があれば教えてください。

私の問題のサンプルコードは次のとおりです。

CSS:

<style>
    .iphone {
    display: none;
}
</style>

Javascript/JQuery:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    //Choose iPhone model
    function slideonlyone(thechosenone) {
     $('.model').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
          }
          else {
               $(this).slideUp(600);
          }
     });
    }   

        //Choose iPhone carrier
        function slideonlytwo(thechosentwo) {
         $('.carrier').each(function(index) {
              if ($(this).attr("id") == thechosentwo) {
                   $(this).slideDown(200);
              }
              else {
                   $(this).slideUp(600);
              }
         });
        }   
        </script>

HTML:
iPhone 5 

           <div class="model" id="iphone5" style="display: none;padding: 15px;">
              <table width="80%">
                <center>
                <tr>
                  <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5a');"><img src="_include/images/icons/att.png"></a>
                    <div class="carrier" id="5a" style="display:none;padding:  5px;"> Next Option.</div>
                  </td>
                  <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5v');"><img src="_include/images/icons/verizon.png"></a>
                    <div class="carrier" id="5v" style="display:none;padding:  5px;"> Next Option.</div>
                  </td>
                  <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5s');"><img src="_include/images/icons/sprint.png"></a>
                    <div class="carrier" id="5s" style="display:none;padding:  5px;"> Next Option.</div>
                  </td>
                  <td width="33%"><a id="5carrier" href="javascript:slideonlytwo('5f');"><img src="_include/images/icons/tmobile.png"></a>
                    <div class="carrier" id="5f" style="display:none;padding:  5px;"> Next Option.</div>
                  </td>


                </tr>
              </center>
              </table>
           </div>
      </td>

      <td width="33%">
         <div>
            <a id="myHeader" href="javascript:slideonlyone('iphone4s');" ><center><img src="_include/images/products/iphone4s.png">
              <br><b>iPhone 4S</b><center></a></a>
         </div>
         <div class="model" id="iphone4s" style="display: none;padding: 15px;">
            <table width="100%">
              <tr>
                <td width="33%">AT&T</td>
                <td width="33%">Verizon</td>
                <td width="33%">Sprint</td>
                <td width="33%">Factory Unlocked</td>
              </tr>
            </table>
         </div>

      </td>

      <td width="33%">
         <div>
            <a id="myHeader" href="javascript:slideonlyone('iphone4');" ><center><img src="_include/images/products/iphone4.png">
              <br><b>iPhone 4</b><center></a></a>
         </div>
         <div class="model" id="iphone4" href="javascript:slideonlyone('4carrier)" style="display: none;padding: 15px;">
            <table width="100%">
              <tr>
                <td width="33%">AT&T</td>
                <td width="33%">Verizon</td>
                <td width="33%">Sprint</td>
                <td width="33%">Factory Unlocked</td>
              </tr>
            </table>
        </div>
      </td>
   </tr>
</table>
</html>
4

3 に答える 3

0

I'd position the div absolute relative to the trigger or whatever element you deem best. The absolute positioning should resolve your positioning problems. You could do this with CSS however I'd opt for jquery for further control. The below is to give you a conceptual idea about positioning.

// get the element to position by. could be row another div or the trigger itself
var offset = $('.element').offset();
// however you grab your div element to slide down this is just to give you an idea.
var modelSlider = ('#id');
// set the offset of your slider.
modelSlider.offset({ left: offset.left, top: offset.top });
modelSlider.show() or whatever you want to do here as to effect.

The point is I wouldn't necessarily just slide it but rather position as it needs to be. It's rather trivial to grab a parent or some trigger and then position your overlay according to it. Your code there isn't complete. If you can provide/edit the complete page, I'm sure we can whip up an exact example as this should be fairly simple.

You can checkout => http://api.jquery.com/offset/ to get more info on .offset() and .postion();

于 2013-05-18T00:43:53.103 に答える