如何在文本

Question

我正在构建一个小片段，以便在文本中显示引用。

基本上，当点击时我会像（Nielsen，1999）那样进行扩展。 现在它在扩展时打破了界限。

我希望扩展的引用显示在文本行下。

编辑（更详细地解释我想要的解决方案）

当文本展开时，我不希望展开的框浮动在现有文本之上。我也不希望它在文本流程内扩展。它需要放在自己的盒子里。

我尝试过在当前行末尾添加.reference-expand的方法。但我找不到任何解决方案。

添加图片澄清：

我该怎么做？

$(document).ready(function($) {
  var allFootnotes = $('.reference-inline');
  allFootnotes.each(expandReference);

  function expandReference() {
    $(this).on('click', function() {
      $(this).closest('.reference').find('.reference-expand').toggleClass('active');
    })
  }
});

.reference-inline {
  text-decoration: underline;
  font-weight: bold;
}

.reference-expand {
  display: none;
  padding: .8rem;
  margin: .8rem;
  width: 100%;
}

.reference-expand.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="reference"><span class="reference-inline"> (Nielsen, 1999)</span><span class="reference-expand"><strong>Nielsen, Jørn (1999):</strong> This is the title and all the other stuff about the publication.</span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 1

您将.active范围设置为display：block。改为设置inline/inline-block。

.reference-expand.active {display: inline;}

Answer 2

提供＆＃34;工具提示＆＃34;的示例参考样式弹出窗口

编辑：这只是一个如何处理此问题的概念，它不会检查近角等情况

＆＃13;

＆＃13;

$(document).ready(function($) {
    var allFootnotes = $('.reference-inline');
    allFootnotes.each(expandReference);

    function expandReference() {
        $(this).on('click', function(event) {
            var elRef = $(this).closest('.reference').find('.reference-expand');
            elRef.css({ top: event.pageY, left: event.pageX });
            elRef.toggleClass('active');
        });
    }
});

＆＃13;

.reference-inline {
    text-decoration: underline;
    font-weight: bold;
}

.reference-expand {
    display: none;
    padding: .8rem;
    margin: .8rem;
    position: absolute;
    background-color: white;
    border: 1px solid black;
}

.reference-expand.active {
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="reference"><span class="reference-inline"> (Nielsen, 1999)</span><span class="reference-expand"><strong>Nielsen, Jørn (1999):</strong> This is the title and all the other stuff about the publication.</span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

要实现这一点，你可以修改绝对定位的引用的CSS，这样它就可以从文档流中取出而不会破坏包含它的行。

另请注意，您可以通过直接向on('click')提供逻辑并删除函数来简化您正在使用的jQuery代码：

＆＃13;

＆＃13;

$(document).ready(function($) {
  $('.reference-inline').on('click', function() {
    $(this).closest('.reference').find('.reference-expand').toggleClass('active');
  });
});

＆＃13;

.reference-inline {
  text-decoration: underline;
  font-weight: bold;
}

.reference-expand {
  display: none;
  padding: .8rem;
  margin: .8rem;
  width: 100%;
}

.reference-expand.active {
  display: block;
  position: absolute;
  background-color: #ff0;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="reference"><span class="reference-inline"> (Nielsen, 1999)</span>
  <span class="reference-expand"><strong>Nielsen, Jørn (1999):</strong> This is the title and all the other stuff about the publication.</span>
  </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
  irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

＆＃13;

＆＃13;

＆＃13;